Background colors and images are some of the most effective ways to decorate and revive website pages.
A beautiful website won’t only be more enjoyable to visit, but it will convert much better than a standard one.
In this article, I’ll show you how to set a background image or color to any page in Elementor.
Different Ways to Set the Background
There are two different ways to set a background image or color to a page using the Elementor page builder.
Firstly, we will assign the desired style to the entire website, and in a second way, we will set the background to the
<body> tag of a specific page.
If you set a background color or image globally to the entire website, it can still be overwritten by settings applied on a specific page.
If you’re looking for different sources for high-quality images, read how to add free images to the WordPress header article to get the complete list.
How to Set a Background Image or Color with Elementor
Setting up the background is an easy process and you can do it from inside the Elementor visual editor.
As mentioned above, there are two ways to set up the background image. First, let’s start by assigning the appearance or color to a specific page.
Set a Background for a Specific Page
To set a background to a specific page, edit the desired page with Elementor and click on the settings icon on the bottom left corner.
Then, move over to the Style tab and select the background type you want, classic or gradient.
If you choose the classic type, you’ll be able to set a solid color or an image that will cover the entire page.
After choosing a background image, options related to the image settings will be added, such as position, size, etc.
However, if you choose the gradient option, you’ll assign two different colors that will blend.
When you’re happy with the results, save the changes.
This method will only affect the specific page you’re editing and not to any other page.
If you would like to set up a background image or color to all the pages at once, follow the steps below.
Set a Background to the entire website
To set a background pattern to the body tag of the entire website, one that will be applied to all the pages, open the Elementor screen of any page.
Then, click on the burger menu icon from the top left corner to open the global site settings.
Then, click on the Site Settings option.
Inside the global site settings options, navigate to the Background tab.
First, choose between a classic (solid color or image) to the gradient option inside the background tab.
If you choose the classic option, set up a solid color using the pallet or upload a photo to the library.
Alternatively, you can also use a color HEX code. To learn how to get the hex code, read our how to change link color in WordPress article.
However, if you chose the gradient option, set two different colors that will blend.
When done, make sure to save the changes.
Once saved, navigate to a different page and verify that the new background appears there as well.
- How to make a transparent header with Elementor.
- How to remove page title with Elementor.
- How to create a user registration form using Elementor.
- How to create timeline content with Elementor.
In this tutorial, you learned how to set a background image to a specific page or the entire website with Elementor.
Leave us a comment and let us know which method you used and from where you get your images.