How to Add Text Over an Image in Elementor

Text overlaid on images is one of the most versatile design patterns on the web. Here are the most common reasons to use it:

• Hero banners: A large background image with a headline and CTA button over the top is the standard layout for landing pages and homepages.
• Section openers: Adding a section title or tagline over a background image helps break up long pages and sets the tone for each content block.
• Product feature images: Labeling parts of a product image or highlighting a key spec over a photo adds context without extra paragraphs.
• Call-to-action overlays: A darkened image with a short “Book Now” or “Get a Quote” message converts passive visitors who are already looking at your visuals.
• Team or service cards: Showing a person’s name and title over their photo in a hover state is a popular portfolio design pattern.

Each use case calls for slightly different Elementor settings, which is why there are multiple methods below.

Elementor gives you three main approaches, each suited to a different scenario:

• Section/Column Background Image: Set an image as the background of a section or column, then add any widget (Heading, Text Editor, Button) on top. This is the most common and cleanest method for hero sections.
• Image Widget + Negative Margin: Place an image widget first, then position a heading over it using negative top margin and Z-index. More fiddly but works for inline images inside content columns.
• Image Box Widget: Elementor’s built-in Image Box widget combines an image with a title and description in a single widget. By default the text sits below the image, but you can use the widget’s style controls to reduce the gap and create a card-style layout where text feels closely tied to the image. It won’t produce a true overlay, but it’s the fastest option for simple image-with-caption card layouts that don’t need background blending.

For most use cases, especially full-width hero banners, Method 1 is the right choice. The other methods are useful when you need text to sit near or on a specific image widget inside a content column rather than as a section background.

Whichever method you use, make sure there is enough contrast between the text and the image underneath it. Light text over a bright image is a common accessibility problem. Use Elementor’s Background Overlay (available in Method 1) to darken the image, or choose a font color with a contrast ratio of at least 4.5:1 against the lightest part of the image.

This is the standard Elementor way to create a hero section or any content block with text on top of a background image:

1. Open your page in the Elementor editor and click on the section where you want the image background.
2. In the left panel, go to Style → Background. Set Background Type to Classic and click the image thumbnail to choose or upload your image.
3. Set Background Size to Cover so the image fills the section at any screen size.
4. Optionally set Background Position to center or top depending on the focal point of your image.
5. To add a dark overlay (which improves text readability), go to Style → Background Overlay, set the color to black, and lower the opacity to around 40–60%.
6. Now add your text widgets inside the section , drag in a Heading widget for the main title, a Text Editor for supporting copy, and a Button if you need a CTA. These will appear over the background image.
7. Adjust the section’s top and bottom padding (in the Layout tab) to control how much of the background image is visible.

This method is responsive by default. On mobile, the background image scales automatically, and you can set a different image specifically for mobile in the Responsive mode background settings.

Use this method when you have a regular image widget inside a column and want to float text over the top of it , for example, a caption or label that overlaps the image rather than sitting below it.

1. Open your page in the Elementor editor. Add a single-column section (or use an existing column).
2. Drag an Image widget into the column and select your image from the media library.
3. Below the image widget in the same column, drag in a Heading widget (or Text Editor) and type your overlay text.
4. With the Heading widget selected, go to Advanced → Layout → Margin. Unlink the margin values and enter a negative number for the top margin , start with -40px and adjust until the text overlaps the image at the height you want.
5. To make sure the heading appears on top of the image (rather than behind it), go to Advanced → Layout → Z-Index on the Heading widget and set it to 10 or higher.
6. Style the text color to white (or another contrast color) so it reads against the image.

Note: this method requires manual adjustment for different screen sizes. Switch to Tablet and Mobile view in Elementor and check the margins , you may need to set device-specific values to keep the text positioned correctly across breakpoints.