How to Add a Background Image in Elementor

Background images are one of the most effective design elements in Elementor. A well-chosen image behind a headline immediately communicates your brand — before a visitor has read a single word. Here is why they’re worth using:

• Hero sections. A full-width background image under your main heading is the standard way to open a homepage or landing page. It gives the section visual weight and makes the page look professional out of the box.
• Call-to-action blocks. Adding a background image to a CTA section draws the eye to it, increasing the chance visitors will engage with your button or form.
• Branding. Consistently using brand-relevant imagery as section backgrounds reinforces your visual identity throughout the site — especially useful for photographers, agencies, and product businesses.
• Breaking up long pages. Alternating plain sections with image-background sections creates visual rhythm that keeps visitors reading rather than bouncing.

Background images add visual interest, but they also add file weight. A large, uncompressed background image is one of the most common causes of slow WordPress page load times — and slower pages hurt both user experience and search rankings.

Before uploading a background image:

• Use WebP format. WebP files are significantly smaller than JPEG or PNG at the same visual quality. Most image editors and WordPress plugins can convert images to WebP automatically.
• Compress before uploading. Aim for a file size under 200KB for a background image. Tools like Squoosh (free, browser-based) or a WordPress image compression plugin handle this well.
• Size it correctly. A background image displayed at 1920px wide does not need to be 4000px wide. Export at 1920 x 1080px (or the actual display width) rather than uploading the raw camera file.
• Enable lazy loading carefully. WordPress lazy-loads images by default, but background images set via Elementor’s style panel may not be lazy-loaded. Test your page speed after adding a background image.

Elementor lets you set a background image at three levels: the full page, a section, or a column. The steps differ slightly for each.

Option 1: Section or Column Background Image (most common)

This is how to add a background image to a specific section or column on your page — the most common use case.

1. Open the page in Elementor editor. Click on the section where you want the background image to appear. A blue dotted border appears around the section to confirm it is selected.
2. In the left panel, click the Style tab (it’s next to the Layout and Advanced tabs).
3. Under Background, click the paint bucket icon labeled Normal.
4. Click the Background Type icon that looks like a classic image frame (the first option). This activates image background mode.
5. Click the Image field. The media library opens. Select an existing image or click Upload Files to add a new one. Click Insert Media when done.
6. Adjust the Position (Center Center works for most images), Size (Cover fills the section fully), and Repeat (No Repeat) to control how the image displays.
7. Click Update or Publish to save.

To do the same for a column, click on the column instead of the section before starting — the Style tab process is identical.

Option 2: Full Page Background Image

To set an image that covers the entire page background:

1. In the Elementor editor, click the hamburger menu (three lines) at the top left of the panel, then click Page Settings. Alternatively, click the gear icon at the bottom left of the editor.
2. Click the Style tab.
3. Under Background, set the Background Type to Classic, then click the Image field and select your image.
4. Click Update to save.

Adding a Background Overlay

If text is hard to read over the background image, add an overlay. With the section selected, go to the Style tab and scroll to Background Overlay. Set it to a solid dark color at 30-50% opacity. This darkens the image just enough to make white text legible without hiding the image.

Enabling Parallax

For a parallax scrolling effect, set the background image on a section, then change the Attachment option from Default to Fixed. This makes the image scroll at a different rate to the content, giving a depth effect.