How to get a different background image on each page of its Divi website?

In a previous tuto, you saw that it was easy to get a different color on each page of your site. I now propose that you carry out the same technique for get a different background image on each page of your Divi site.

The procedure is much the same, but above all, it's just as easy...

Here is the program:

1. Enable embossed layout
2. Set a default background image
3. Getting identifier from each page
4. List URLs of your images
5. Edit CSS to display a different background image on each page
6. Here is the result in video

1 – Enable embossed layout

In the same way as to make the background color visible, you must enable the embedded layout of Divi so that see the background image of your Divi site.

For this, just go to the tab Appearance > Customize > General Settings > Layout Settings > Enable embossed layout

To learn more about the procedure, read the article dedicated to the embossed layout of Divi.

2 - Set a default background image

Divi natively offers this option and it is very easy to select your background image from customization settings.

1. Appearance > Customize
2. Click General parameters
3. Click Background
4. Then on "Select Image" in the option "Background image"
5. A window will open to offer to upload your image or choose it from the elements of your media library.
6. If your image requires it, check the box "Stretch the background image"
7. For a nice effect, choose the option Fixed available in section "Substantive position". The background image will be fixed and the content of your page will slide to scroll. Remember to click on « Publish » to save your changes.

Now, the whole of your site make the background image appear that you just set.

3 – Getting identifier from each page

The CSS code I give you later in this article will need information specific to each site. You will then need to obtain this information to adapt the CSS code to work on your site.

You will therefore have to first list the pages of your site that will be the subject of a background image change in order retrieve their ID.

To obtain the identification of pages to be modified:

1. See the administration of the page in question. You can do this very well from the front office by clicking on Edit Page (not on enable visual builder). Or from the back office to the tab Page > All pages.
2. Once in your page in "Edit" mode, just look at the your browser's URL bar. You will see a type URL monsite.com/wp-admin/past.php?post=9&action=edit. The number after [post=] is your page identifier.

It is therefore sufficient to identify this identifier for each page to be modified.

4 - List URLs of your images

In the same way as the identifier, there is another parameter that will be unique to your site: the URL of your images.

You will need to list the URLs of the images you will use as background. For this, go to the tab Media > Library and click on the image to set in the custom background to recover its URL entered in the field Web address.

Renew the procedure for all images that will be used in the background.

5 – Edit CSS to display a different background image on each page

Copy and paste the CSS code below into the tab Appearance > Customize > Additional CSS, taking care to modify the elements in red with your own values:

/* custom images for each page */ .page-id-28.custom-background { background-image: url("place here the url of your image"); Page-id-9.custom-background { background-image: url("place here the url of your image"); Page-id-25.custom-background { background-image: url("place here the url of your image");
}

Some explanations about this code:

• .page-id-28: This is where you will need to change your page ID. Change the 28 by the numbers that are specific to your pages.
• .custom-background: Don't change anything here.
• background image: url("xxx") : Here you can insert the URL of your image instead of the xxx.

To learn more about the CSS property "background-image", I invite you to read this page.

Need more resources on Divi? Visit ElegantTheme's blog full of ideas and tutos!

6 - Here's the result in video...

Find other tutorials for Customize Divi on the dedicated section !