How to Add Text Over an Image in Elementor

Last modified: November 2, 2026

Elementor

Placing text over an image in Elementor is one of the most common design tasks on WordPress sites, and there are three distinct ways to pull it off. Each method works differently under the hood, so the right choice depends on whether you want a full-width hero banner, a card layout, or a quick inline effect. This guide walks through all three methods with exact steps, so you can pick the one that fits your layout and get it done without guessing.

Which Method to Use

Before jumping into the steps, here is a quick comparison so you can pick the right tool for your situation:

Section Background Image — best for hero banners, full-width headers, and call-to-action sections. The image sits behind the entire section, and your text sits on top inside a column. This is the most stable method for mobile.
Image Widget with Negative Margin — works when you need an image in a specific spot on the page and want text to visually overlap it. Requires careful z-index and margin tuning and can be tricky on mobile.
Image Box Widget — the right choice for repeating cards, feature grids, or any layout where you want the same image-plus-text pattern several times in a row. Elementor handles the positioning for you.

Method 1: Section Background Image (Step-by-Step)

This is the cleanest and most mobile-friendly way to put text over an image in Elementor. The image becomes part of the section background, so it fills the full width automatically and text sits on top inside the column layout.

Open Elementor on your page and click the + icon to add a new section. Choose a one-column or two-column layout depending on how you want to position the text.
Click the section handle (the six-dot icon at the top of the section) to select the section itself, not a column or widget.
In the left panel, click the Style tab.
Under Background, click the paint bucket icon. Set Background Type to Classic.
Click the image thumbnail to open the media library and choose your image.
Set Position to Center Center and Size to Cover. This stops the image from repeating and keeps it centered regardless of viewport width.
Click inside the column and drag a Heading widget into it. Type your overlay text.
Now add an overlay so the text is readable. With the section still selected, go to Style > Background Overlay.
Set the overlay Background Type to Classic. Click the color swatch and choose black. Set Opacity to somewhere between 0.4 and 0.5. This darkens the image enough to make white text readable without completely hiding the photo.
Adjust the section padding in the Layout tab to push the text away from the edges. A top and bottom padding of 80px is a solid starting point.
Set the heading text color to white in the Style tab of the Heading widget.

Responsive tip: After finishing, click the mobile icon at the bottom of the Elementor panel to switch to mobile preview. If the section looks too short, go to the section Layout tab, find Min Height, and click the mobile icon next to the field to set a mobile-specific value. A minimum height of 300px usually works well on phones.

Method 2: Image Widget with Negative Margin Overlay

This method stacks an image widget and a heading widget inside the same column, then uses a negative top margin to pull the heading up over the image. It is more flexible than it sounds, but it takes more tweaking to get right, especially on smaller screens.

Add a section with a single column, or use an existing column where you want the effect.
Drag an Image widget into the column and select your image.
Below the image widget, still inside the same column, drag a Heading widget.
Select the Heading widget and click the Advanced tab in the left panel.
Under Margin, unlink the values by clicking the chain icon, then set the Top margin to a negative number. Start with -80px and adjust from there. The heading will move up over the bottom of the image.
Still in the Advanced tab, scroll down to Z-Index and set it to 10. This places the heading in front of the image layer so it renders on top.
Set the heading text color to white (or another high-contrast color) in the heading Style tab.
Click Preview and switch to mobile view. Negative margins often collapse or overlap incorrectly on small screens. You may need to set a different negative margin value, or zero it out entirely, for mobile using the responsive toggle next to the margin field.

This method is worth using when you need the image to be part of the page flow rather than a section background, but plan on testing it across screen sizes before publishing. It is the least predictable of the three methods on mobile.

Method 3: Image Box Widget

The Image Box widget is Elementor’s built-in solution for combining an image with a title and description. It is the fastest method when you need the same layout repeated in a grid, such as a features section or a team roster.

In the Elementor widget panel on the left, search for Image Box and drag it into your layout.
In the Content tab, click the image thumbnail to upload or choose your image from the media library.
Type your Title and Description directly in the widget fields. The title appears over or below the image depending on your style settings.
Click the Style tab to control the appearance. Set the Title Color, Description Color, and Title Typography to match your site design.
Use the Image Height field to set a fixed height for the image. This is useful when you have multiple image boxes in a row and want them to align at a consistent height.
To add a color overlay over the image, check whether your Elementor version includes built-in overlay controls in the Style tab. If it does, use those. If not, add a CSS class in the widget Advanced > CSS Classes field and write the overlay rule in Elementor > Custom CSS in the WordPress dashboard.
To repeat the layout, right-click the Image Box widget in the editor and select Duplicate, then swap out the image and text for each card.

The Image Box widget is purpose-built for this pattern, so it handles vertical alignment and spacing more predictably than the negative margin method. If you are building a grid of cards, put your Image Box widgets inside a section with equal-width columns and let Elementor handle the alignment across rows.

Common Problems When Overlaying Text on Images

A few things go wrong often enough to be worth knowing about before you run into them.

Low contrast makes text unreadable. White text on a light image and dark text on a dark image both fail readability checks. The background overlay in Method 1 solves this for section backgrounds. For the other methods, either choose images with a naturally dark or blurred area where the text will sit, or add a semi-transparent colored box behind the text using a background color set directly on the text widget.

The overlay breaks on mobile. Section background images set to Cover sizing generally hold up well across screen sizes. Negative margin layouts in Method 2 are the most likely to break because the overlap amount is set in pixels rather than percentages. Always check mobile preview before publishing and set mobile-specific values using the responsive toggle next to each field.

The image stretches or crops unexpectedly. This usually means the image dimensions do not match the layout proportions. For section backgrounds, use an image at least 1400px wide. For the Image Box widget, set a fixed image height so all cards in a row crop to the same size. For the negative margin method, the image displays at whatever size the column allows, so a low-resolution image will look blurry when the column is wide.

Questions About Text Overlays in Elementor

Does overlay text affect SEO?

Text placed in a Heading or Text Editor widget in Elementor is fully visible to search engines, regardless of whether it sits over an image. Google reads the HTML output of your page, and Elementor writes the heading text straight into the source code. The image behind it is just a CSS background or an image tag with its own alt attribute. Your overlay heading text contributes to on-page SEO the same way any other heading does.

Can I overlay text on a video background in Elementor?

Yes. When you set a section background type to Video in the Style tab, Elementor plays the video behind the section content the same way a static image would appear. Your heading and text widgets sit inside the column on top of the video. Add a background overlay the same way as in Method 1 to keep the text readable against the moving footage. Note that video backgrounds do not autoplay on most mobile browsers, so always set a Background Image as a fallback in the same section for mobile visitors.

Why does my text overlay look blurry?

Blurry text over an image is almost always caused by a CSS filter or backdrop-filter property being applied either by your theme or by a custom CSS rule on the section or overlay element. Check the section Advanced tab in Elementor and your theme stylesheet for any blur() values. A second common cause is a low-resolution image being stretched to fill a wide section, which makes the entire section look soft, even though the text itself is sharp.

How do I add a gradient overlay instead of a solid color?

In the section Style tab, under Background Overlay, set the Background Type to Gradient instead of Classic. You can then pick two colors and set their opacity independently. A common approach is to set the first color to black at 60% opacity and the second color to transparent, then position the gradient so the dark end sits behind the text and the transparent end lets the rest of the image show through. Adjust the gradient angle to control which part of the image gets darkened.

* This button will show the rest of the post and open up an offer from a vendor

Why Add Text Over Image?

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.

How to Add Text Over Image

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.

Method 1: Section Background Image (Recommended)

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

Open your page in the Elementor editor and click on the section where you want the image background.
In the left panel, go to Style → Background. Set Background Type to Classic and click the image thumbnail to choose or upload your image.
Set Background Size to Cover so the image fills the section at any screen size.
Optionally set Background Position to center or top depending on the focal point of your image.
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%.
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.
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.

Method 2: Image Widget + Negative Margin

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).

Open your page in the Elementor editor. Add a single-column section (or use an existing column).
Drag an Image widget into the column and select your image from the media library.
Below the image widget in the same column, drag in a Heading widget (or Text Editor) and type your overlay text.
With the Heading widget selected, go to Advanced → Layout → Margin. Unlink the margin values and enter a negative number for the top margin, starting with -40px and adjust until the text overlaps the image at the height you want.
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.
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.

Final Word: How to Add Text Over an Image in Elementor

For most use cases, especially hero banners and section openers, the Section Background Image method is the right choice. It’s responsive out of the box, easy to adjust, and gives you complete control over padding, overlay opacity, and background position.

The negative margin method is best kept for small inline overlays where you specifically need text to sit on top of an image widget rather than a section background. Just remember to check it on mobile, since negative margins can behave differently on small screens. If your design requires text over an image without a visible page title above it, you can hide the page title in Elementor through the page settings in just a few clicks.