Adding text overlay to background images in Elementor

The page builder allows you to add images in various positions. Next to featured images and images within the post content, you can add an Elementor background image to sections, containers, or paragraphs.

Image Source Control comes with dedicated support for these background images so that you can manage and display their image credits similar to other image positions. The only limitation is that the image text overlay with such sources is unstyled because there is no one-size-fits-all solution. Developers can follow the information on this page to apply their own styling.

Enable image caption support for Elementor

Displaying image credit captions with Image Source Control works out of the box for featured images and images within the post content.

To enable support for Elementor background images, go to Settings > Image Sources^(?) > Miscellaneous settings and check the Elementor option.

This option only shows up if you have Elementor enabled.

Images with text in Elementor

Elementor hosts images in the Media Library of your site. Here, you will find the image source fields of these images. For more details, please follow the instructions in the general documentation.

Styling the overlay

If you are using the Overlay to display image sources, it might look different for background images compared to images within the content. Due to the many layout options within Elementor and in custom themes, we haven’t found a solution that works for all.

Find examples of custom CSS to style the Elementor background image overlay below.

You can use the suggestions below for custom styling.

Please share your custom CSS rule with us if you believe it might help others. We are happy to add it here.

Display the overlay in sections at the bottom right

.elementor-section .isc-source-text {
    position: absolute;
    bottom: 0;
    right: 0;
}Code language: CSS (css)

Known limitations

As mentioned, the overlay for background images comes without styling. This means that the Overlay position option in the general settings has no effect. See the “Styling the overlay” section.

The image text overlay is displayed for elements outside the content, regardless of the option selected under Overlay > Included images.

The overlay or source lists do not appear in the Elementor editor.

Nested elements with backgrounds, e.g., a container with a background image hosting a paragraph with another background image, will only display one overlay.

Links are disabled in overlays if the element that has the background image is itself a link, i.e., an <a> tag. Otherwise, the wrong HTML markup would split the overlay and partially displayed below the image.