help center

On this page

Add text over image in Elementor

Last Update: February 26, 2024

Adding text over images with Elementor can be accomplished in several ways. In this document you will learn two of the most common methods to accomplish this.

  • Use the image as a background
  • Use margins and Z-position 

Use the image as a background

In this example, we will create a Heading widget that uses an image as a background. This will make the text appear above the image.

To add text on top of an image:

  1. Add a Container element onto the canvas. For more details see, Add elements to a page.
  2. In the panel, set the container’s Width and Min Height to a size suitable for the image. 
    image 79 Add text over image in Elementor 1
    In this case, we’re setting both to 300 px. 
    image 80 Add text over image in Elementor 3
  3. Click the Style tab.
    image 81 Add text over image in Elementor 5
  4. In the Background Type section, click the classic logo WvOHW9Ha2mJ2slxKt2oefdXAO5A9DcVjU hniYv24iz5woUEUkaO59r8dnswSta486D92s33TqvqR4JqWVWpG6q0CpOD87LqwvKg9Zz9MIgUEI5qNxaubnwyTBf5 Et58q3oD2r0FAhvToRdw83fQw Add text over image in Elementor 7.
    image 82 Add text over image in Elementor 9
  5. Click the image section.
    The Media Library appears.
    image 83 Add text over image in Elementor 11
  6. Select the image you want to use as the background. For more details, see Add images and icons.
    image 84 Add text over image in Elementor 13
    The image appears as the container background.
    image 85 Add text over image in Elementor 15
  7. From the Position dropdown menu select Center Center.
    image 86 Add text over image in Elementor 17
  8. From the Repeat drop-down menu, select No Repeat
    image 87 Add text over image in Elementor 19
  9. From the Display Size drop-down menu, select Contain.
    image 88 Add text over image in Elementor 21
  10. In the Editor top bar, click the + icon.
    image 89 Add text over image in Elementor 23
    All elements appear in the panel.
    image 90 Add text over image in Elementor 25
  11. Add a Heading widget to the container.
    image 91 Add text over image in Elementor 27
  12. Enter the text you want to have appear above the image.

The text appears on top of the image.

Use margins and Z-index 

In this example, we will add a heading over an image by giving the Heading widget negative margins.  

To add text on top of an image:

  1. Add an Image widget onto the canvas. For more details see, Add elements to a page.
    image 92 Add text over image in Elementor 29
    This automatically creates a new container.
    image 93 Add text over image in Elementor 31
  2. Add an image to the Image widget. For more details, see Image widget.
    image 94 Add text over image in Elementor 33
  3. In the right corner of the top toolbar, click the + sign.
    image 95 Add text over image in Elementor 35
    All the elements appear in the panel.
    image 96 Add text over image in Elementor 37
  4. Drag and drop a Heading widget above the image. For more details, see Heading widget.
    The Heading widget options should be open in the panel. If they’re not, click the Heading widget to open the options in the panel.
    image 97 Add text over image in Elementor 39
  5. Enter the text you want to appear over the image.
    image 98 Add text over image in Elementor 41
  6. In the panel, click the Style tab.
    image 99 Add text over image in Elementor 43
  7. Select center alignment.
    image 100 Add text over image in Elementor 45
  8. Click the Advanced tab.
    image 101 Add text over image in Elementor 47
  9. In the panel, enter 1 in the Z-index text box.
    After entering the Z-index you won’t see any change but it essentially raises the headline one level which will be important later. For more information on Z-index, see  Use the Z-index.
  10. On the canvas, click the Image widget to select it. 
    image 102 Add text over image in Elementor 49
  11. In the panel, click the Advanced tab.
    image 103 Add text over image in Elementor 51
  12. In the panel, click the link icon to unlink the margins.
    image 104 Add text over image in Elementor 53
  13. Add a negative top margin to the Image widget, This will move the image up toward the top of the screen so that it overlaps the text.
    Because the Heading widget has a Z-index of 1, when they overlap, the text will appear above the image.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article