Tutorial: Learn how to add a full page background image in Elementor now! 🧑‍🎨

I wrote this front-end design guide regarding how to set the full-page background image for a full page using the Elementor page builder plugin (Elementor) as a result of some difficulty that I had when trying to determine where exactly this UI / UX setting is located for a page that I was developing on a WordPress (WP) website.

This instructional only covers the full page background image settings in Elementor and not the background image settings for any of the other Elementor components.

We can see where this is set for the entire page in the image below.

Three pointers directing the user to where they can set the background image on their WordPress page using the Elementor plugin: Click on the Page Setting gear icon, select the Background Type, and choose your Image.
Three pointers directing the user to where they can set the background image on their WordPress page using the Elementor plugin: Click on the Page Setting gear icon (top center), select the Background Type (middle left), and choose your Image (lower left).

We’ll cover the steps required in order to set the full page background image in more detail in the next section.

This article was last updated on June 2, 2025.

Instructions regarding how to add a full page background image with Elementor

Note that this demonstration uses the OceanWP Theme.

The OceanWP Theme is not required in order to execute the following instructions however I point this detail out in the event that the reader may want to know which theme is in use in this example.

Tools and Supplies

  • WordPress (version 6.6.1)
  • Elementor Page Builder Plugin (version 3.23.2)

Prerequisites

Prerequisites for this exercise include having your background image already loaded into your WordPress instance.

Too Many Scripts Slowing You Down?

When your pages use too many JavaScript and CSS files, website performance suffers. Let’s clean this up and boost your Core Web Vitals.
Fix My WordPress Website Now!

Step One: Click on the Elementor Page Settings gear.

Locate the Elementor Page Settings gear icon and click it.

Click the "Page Settings" gear icon indicated by the red pointer and located un the top center part of the page.
Step One: Click the "Page Settings" gear icon in the top center of the page.

Step Two: Select the Style tab.

Click on the Style tab under the in the middle of the Page Settings options.

Click the "Style" option indicated by the red pointer and located on the upper left-hand side of the page under "Page Settings".
Step Two: Click on the "Style" option.

Step Three: Select the “Classic” Background Type option.

Click on the “Classic” background option icon — this is located under the Body Style options, to the right of the “Background Type”, and is represented by the paint brush icon.

Click the paintbrush icon indicated by the red pointer and located on the lower left-hand side of the page under "Page Settings", "Style", "Body Style", "Background Type".
Step Three: Click the "Background Type" paintbrush icon.

Step Four: Select the Image option.

Click on the Image option and locate the image you’d like to use (note that this has already been set in this example).

Set the background image by clicking in the image selection box indicated by the red pointer and located on the lower left-hand side of the page under "Page Settings", "Style", "Body Style", "Image".
Step Four: Set the background image.

And that’s all it takes to set the background image for the entire page using the Elementor Page Builder Plugin — the conclusion follows.

Tutorial Conclusion

I hope this guide pertaining to setting the full page background image on WordPress website that uses the Elementor page builder plugin has been helpful.

See Also

dd

author avatar
ThosPFuller
I am a software engineer based in Northern Virginia (USA) and this website focuses on content engineering, web development, Technical SEO, Search Engine Optimization (SEO).
See Full Bio
social network icon

Leave a Reply