How can I get a different background image on each page of my Divi site?

Published on 24/02/2019 | 20 comments

In a previous tutorial, you saw that it was easy to get a different color on each page of your site. Now I suggest you use the same technique to get a different background image on each page of your Divi site.

The procedure is pretty much the same, but more importantly, it's just as easy....

Here is the program:

  1. Enable nested layout
  2. Set a default background image
  3. Get the identifier of each page
  4. List the URLs of your images
  5. Change 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

Announcement: 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 page layout

Just like making the background color visible, you need to enable Divi's nested layout so that the background image of your Divi site can be seen.

To do this, simply go to the Appearance > Customize > General Settings > Layout Settings > Enable nestedlayout

To discover the procedure in detail, read the article dedicated to Divi's nested layout.

 

2 - Set a default background image

Divi offers this option natively and it's 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 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 offering you to upload your image or choose it from 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 slide when scrolling. Don't forget to click on "Publish" to save your changes.

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

 

3 - Get the identifier of each page

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

You will need to start by listing the pages on your site that will be subject to a background image change in order to retrieve their IDs.

Obtenir l'identifiant d'une page

How to find the ID of your web page

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 (not on Activate 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 like monsite.com/wp-admin/past.php?post=9&action=edit. The number after [post=] is the identifier of your page.

You just have to find 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 image URL 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 tab > Library and click on the image you want to set as your custom background to retrieve its URL from the Web Address field.

Repeat the procedure for all the images you will use as background.

 

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

Copy and paste the CSS code below into the Appearance > Customize > Additional CSStab, 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 your page ID. Change the 28 by the numbers that are specific to your pages.
  • .custom-background : do not 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 "background-image" CSS property, I invite you to read this page.

Need more resources on Divi? Visit the ElegantTheme blog which is 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
A background image different on each page Divi

852 words

3

You should like it too:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images look more graphic and give your layout an original look. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this video.

20 Commentaires

  1. Catherine Menguy

    Des jours que je cherchais la balise css à mettre pour modifier le fond de ma page d’accueil.. Mille mercis !

  2. Lycia Diaz

    Merci Catherine 😉

  3. Michele

    bonsoir Lycia
    2 questions
    1/peut on changer l’image de fond d’un layout ?
    2/ peut on utiliser differents layouts par page créée ?
    merci

    si tout ça c’est possible ca m’eviterait de mettre la patte aux codes

    PS j’apprends bcp dans les e books !!!

  4. Lycia Diaz

    Super que mes Ebooks t’aident Michèle ! Oui bien sûr que tu peux changer les images ! Tu dois trouver dans quel module elles ont été placées. Si c’est une image de fond, c’est souvent dans les réglages de la section (bleue) onglet contenu > fond > sous-onglet image (icône d’une image)… et oui tu peux utiliser différents layout sur chaque page.

  5. Michele

    super merci pour ta réponse je vais essayer ce soir et te tiens au courant
    merci encore

  6. Michele

    rebonjour Lycia
    ca ne marche pas
    c’était bien dans la section violette j’ai changé image de fond et elle ne remplace pas l’autre
    déjà dans Admin il y avait marqué Hero section et j’ai supprimé
    pour que ca redevienne section
    ca n’integre pas la nouvelle image et je garde le fond il y a surement une autre case à cocher
    je n’arrive pas à joindre une copie d’ecran
    si tu as une idée …je continue à chercher

  7. Michele

    j’ai posté un commentaire il y a deux heures car je n’y arrivais pas….. je ne le retrouve pas dans le fil !!
    en tous cas j’ai trouvé la solution
    il faut aller dans fond et aussi dans superposition et dans les deux modules
    si l’autre commentaire ressort efface le
    je continue à bosser
    qd j’aurai fini promis je te montre le site

  8. Lycia Diaz

    Salut Michèle.
    J’ai l’impression que tu veux aller trop vite. Il faut que tu prennes le temps d’apprivoiser Divi et de comprendre son fonctionnement global. Mes ebooks t’aident en partie, l’autre partie viendra avec le temps et la pratique. Ça ne s’acquiert pas en une journée malheureusement ! Il faut des semaines… Tu dois chercher et galérer, quelques fois, pour trouver ! Plus tu es curieuse, plus tu découvriras les options. N’hésite pas à cliquer partout et même à créer des pages de test pour mieux comprendre. Ensuite, tu seras de plus en plus efficace. Apprendre WordPress et Divi, c’est comme tout : apprendre à conduire, apprendre PhotoShop, apprendre à lire, hi hi hi !
    Donc je ne m’inquiète pas, tu vas trouver.

  9. Lycia Diaz

    Super, ben tu vois, j’ai répondu à ton 1er commentaire avant de voir celui-ci… Je savais que tu trouverais 😉

  10. Michele

    hi hi hi !!
    bon j’avance mais je fais plus que ça heureusement il pleut !!!!!
    en tous cas c’est sympa de repondre aussi vite et gratuitement en plus franchement j’adooore
    en fait j’ai acheté un domaine pour moi perso et un domaine pour mon club
    alors je fais tous les essais sur le mien et je mettrai en place sur celui du club qd je serai au top
    voili voilà
    je voudrais qd meme pas y passer tout l’été !!
    merci Lycia

  11. Eric

    Bonjour et merci pour ce tuto !

    Connaîtriez-vous le code pour personnaliser le fond d’une page produit woocommerce avec DIVI ?

    Merci 🙂

  12. Lycia Diaz

    Salut Éric, pourquoi tu n’utilises pas le thème Builder ? Tu personnalises ta page comme tu veux.

  13. Eric

    Bonjour Lycia et merci pour ta réponse 🙂

    ce que je cherche à faire c’est un fond différent pour chaque produit. Je ne crois pas que cela soit possible avec le thème builder.

  14. Eric

    Merci Lycia pour ta réponse,

    j’ai besoin d’une image de fond personnalisée pour chaque produit. Je ne crois pas que le thème builder puisse le faire. L’astuce donner dans le tuto fonctionne pour les pages, mais pas pour les produits.
    (J’ai essayé avec .product-id-28.custom-background ou .post-id-28.custom-background avec l’ID du produit)

  15. Lycia Diaz

    Salut Eric, avec le thème builder, tu peux définir ton image de fond et aller la chercher en base de données. Si tu choisis l’image de mise en avant, elle sera alors différente pour chaque fiche produit. Je pense donc que c’est possible.

  16. Lycia Diaz

    Eric, je suppose qu’il faut inspecter le code pour voir exactement quelle classe CSS est appelée. Ensuite, lorsqu’il y a plusieurs classes, mettre un espace ou non entre les deux peux avoir un impact.

  17. Brec

    Bonjour,
    Je n’ai pas l’onglet apparence sur mon tableau de bord

  18. Lycia Diaz

    Salut Brec. Vérifies que tu aies bien un profil Administrateur

  19. Brec

    Comment peut on savoir notre profil ?

  20. Lycia Diaz

    Brec, tu vas à Utilisateurs > Profil

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This