Parts of your site use background images for whole sections, like the hero at the top of a page. This guide shows you how to swap one of those backgrounds in Elementor.
Overview of the process
- Open the section settings
- Change the image on the Style tab
- Publish your changes
Step 1: Open the section settings
While editing the page in Elementor, hover over the area with the background image and a pink tab with three icons appears at the top of the section. The plus adds a new section above, the six dots open the section settings, and the cross deletes the section. Click the six dots and the Edit Section panel opens on the left.
Alternatively, you can right click anywhere on the section and choose the first option, Edit Section (or Edit Container on newer layouts).
Step 2: Change the image on the Style tab
In the panel on the left, click the Style tab. Under Background you will see the current image. Click the image thumbnail under Image and choose a new one from the media library, or upload a fresh image.
Step 3: Publish your changes
Nothing goes live until you publish. Click the Publish button in the top right of the editor to send your changes to the live site.
Quick tips
- Use an image of a similar size and orientation to the one you are replacing so the layout does not jump around
- Large photos slow your site down, so resize images to around 1920px wide before uploading
- Check the section on mobile after publishing, since backgrounds crop differently on small screens
- If the text over the image becomes hard to read, ask us about adding an overlay to improve contrast