How to Place an Image Inside a Text in Elementor

Last updated on
Feb 7, 2024

Although CSS knowledge is not required to use Elementor, it would be a great bonus to have CSS skills in using Elementor. If you want to accomplish a certain design style and Elementor offers no styling option to accomplish it, you can use your CSS skills.

Elementor offers no option to use an image as the background of a text. The only way can do to accomplish it is by adding custom CSS. In order to be able to add a custom CSS, you need to use the pro version of Elementor since the custom CSS feature is only available on the pro version.

First off, create a new page or a new template and edit it with Elementor. Or, you can also edit an existing page or template. Add the Heading widget to the canvas area.

Go to the settings panel and replace the default text on the Title block under the Content tab. Next, go to the Style tab to style up the text. You can set the text size and style by clicking the pencil icon on the Typography option on the Title block. You don’t need to set the text color as you want to use an image as the background.

Once you are done setting the text size, style, and font style, go to the Advanced tab and open the Custom CSS block. Paste the following CSS code. Make sure to replace the image URL with your own image URL.

selector .elementor-heading-title
     background: url("") green repeat 30% 70%  ;

Here is the example.

You can use a thick font to apply the tip above.

Speaking of Elementor itself, you can make use of the pre-made Elementor templates to get your job done more quickly. Also, you can use a proper Elementor hosting service for a better site performance.

This page may contain affiliate links, which help support the project. Read our affiliate disclosure.

Aliko Sunawang

Aliko is a professional blogger and web creator. He has been blogging with WordPress since 2012. In his spare time, he loves going out to take some photos.

Want to turn your WordPress knowledge into a passive income machine?