Add a layered background

Layered backgrounds allow you to add depth to elements by adding colors, images and text on top of one another. Using layered backgrounds you can create a variety of interesting effects. In the example below, we’ll use layered effects to create a textured Heading element that incorporates an image and text created in a graphics program. 

Create a layered background: Step-by-step

1. Open the Elementor Editor. 
2. Drag a Heading element to the canvas.
   The Heading element options open up in the left panel. 
   
3. In the Title box, enter It’s Raining Tees.
   
4. Click the Style tab.
   
5. Open the Size section.
   
6. Set the size to 1000 width and 600 height.
   
7. Open the Background section.
   
8. Click the plus sign to add a background image. For details, see Style tab – Background.
   
9. Add an image to the background. The image should be set to Cover.
10. Click outside the background image window to close it.
    
11. Click the plus sign to add another layer.
    
12. Add a second image to the background.
    Let’s position the image in the upper left corner.
    
13. Use the Position dropdown to select Custom.
    
14. Set the X value to -20 and Y value to -60.
    
15. Open the Spacing section.
    Now we’ll center the text using the padding settings.
    
16. Set the padding to top 250 and left 300.
    The background is complete.