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:
- Activate the nested layout
- Set a default background image
- Get the identifier of each page
- List the URLs of your images
- Change the CSS to display a different background image on each page
- Here is the result in video
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.
- Appearance > Customise
- Click on General Settings
- Click on Background
- Then click on "Select an image" in the "Background image"option
- A window will open offering you to upload your image or choose it from your media library.
- If your image requires it, check the "stretch background image"box
- 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.
To obtain the identifier of the pages to be modified :
- 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.
- 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.
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 !
Des jours que je cherchais la balise css à mettre pour modifier le fond de ma page d’accueil.. Mille mercis !
Merci Catherine 😉
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 !!!
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.
super merci pour ta réponse je vais essayer ce soir et te tiens au courant
merci encore
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
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
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.
Super, ben tu vois, j’ai répondu à ton 1er commentaire avant de voir celui-ci… Je savais que tu trouverais 😉
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
Bonjour et merci pour ce tuto !
Connaîtriez-vous le code pour personnaliser le fond d’une page produit woocommerce avec DIVI ?
Merci 🙂
Salut Éric, pourquoi tu n’utilises pas le thème Builder ? Tu personnalises ta page comme tu veux.
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.
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)
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.
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.
Bonjour,
Je n’ai pas l’onglet apparence sur mon tableau de bord
Salut Brec. Vérifies que tu aies bien un profil Administrateur
Comment peut on savoir notre profil ?
Brec, tu vas à Utilisateurs > Profil