Image de fond

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

Published on 24/02/2019 | 20 comments

852 words

3

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

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

Here is the programme:

  1. Activate the 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 recognise. The classic links are in purple and sponsored links are in pink.

 

1 - Activate the nested page layout

In the same way as making the background colour 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 > Customise > General Settings > Layout Settings > Enable NestingLayout

To find out more about the procedure, read the article on 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 customisation settings.

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

Set a default background image in Divi settings

  1. Appearance > Customise
  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 scroll. Don't forget to click on "Publish" to save your changes.

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

 

3 - Obtain the identifier of each page

The CSS code I 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 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=<strong>9</strong>&action=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 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 > Library tab 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 > Customise > 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 to 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 CSS property "background-image", 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 on video...

Find more tutorials for customise 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
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

You might like it too:

Comment changer une image au survol de la souris ?

How to change an image on mouseover?

If you are not using the hover options available in Divi, you are missing out! Here's an example of how to use them that you might find useful. In this tutorial and video, I show you how to change an image on mouseover.

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 *

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