30 % Black Friday discount applied automatically in the checkout.0d 3h 1m 57s

Adding image captions to Elementor background images

The Elementor page builder allows you to add images in various positions. Next to featured images and images within the post content, you can add background images 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 overlay with such sources is unstyled due to there not being a one-size-fits-all solution to do that. Developers can follow the information on this page to apply their own styling.

Enable image caption support for Elementor

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.

Image credits 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 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 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.