In a previous tutorial, you saw how easy it was obtain a different color on each page of your site. I now propose you to perform the same technique to obtain a different background image on each page of your Divi site.

The procedure is essentially the same but above all, it is just as easy.....

Here is the program:

  1. Enable nested layout
  2. Set a default background image
  3. Get the ID of each page
  4. List the URLs of your images
  5. Modify the CSS to display a different background image on each page
  6. Here is the result in video
Image de fond différente

Different background image on each page of the site with Divi

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

 

1 - Activate the nested layout

In the same way as to make the background color visible, you must enable the nested layout of Divi so that the background image of your Divi site can be seen.

To do this, simply go to the Appearance tab > Customize > General Settings > Layout Settings > Enable nested layout

To find out more about the procedure, read the article dedicated to the nested layout of Divi.

 

2 - Define a default background image

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

Définir une image d'arrière-plan par défaut

Set a default background image in the Divi settings

  1. Appearance > Customize
  2. Click on General Settings
  3. Click on Background
  4. Then click on "Select an image" in the "Background image" option
  5. A window will open asking you to upload your image or choose it from the items in your media library.
  6. If your image requires it, check the "stretch background image" box
  7. For a nice effect, choose the "Fixed" option available in the "Background Position" section. The background image will be fixed and the content of your page will scroll. Don't forget to click on "Publish" to save your changes.

Now, your entire site will display the background image you just defined.

 

3 - Get the ID of each page

The CSS code I give you later in this article will need site-specific information. You will then need to obtain this information to adapt the CSS code so that it works on your site.

You will therefore have to start by listing the pages of your site that will be the subject of a background image change in order to retrieve their identifier.

Obtenir l'identifiant d'une page

How to find the ID of your web page (ID)

To obtain the identifier of the pages to be modified:

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

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

 

4 - List the URLs of your images

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

Récupérer l'URL de l'image

Retrieve the URL of the image from the media library

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

Repeat the procedure for all images that will be used as backgrounds.

 

5 - Modify the CSS to display a different background image on each page

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

/* images personnalisées pour chaque page */

.page-id-28.custom-background {
	background-image: url("placer ici l'url de votre image");
}

.page-id-9.custom-background {
	background-image: url("placer ici l'url de votre image");
}

.page-id-25.custom-background {
	background-image: url("placer ici l'url de votre image");
}

 

Some explanations about this code:

  • .page-id-28 : this is where you will need to change the ID of your page. Change the 28 to 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 tutorials!

 

6 - Here is the result in video....

Find other tutorials for customize Divi on the dedicated section !

Une image différente sur chaque page de son site Divi
Image d'arrière-plan différente sur chaque page de son site Divi

Pin It on Pinterest

Shares
Share This