Une image de fond qui change aléatoirement

par Pierre Bichet | 4 décembre 2017 | Tutoriels Divi | 19 commentaires

Je vais ici vous expliquer comment réaliser un effet assez sympa, facile à mettre en place, et qui permet de dynamiser le design de son site en donnant au visiteur une impression de nouveauté quand celui-ci revoit plusieurs fois la même page.
Dans mon exemple, j’ai utilisé 3 images et un module en-tête plein écran, mais libre à vous de choisir plus d’images et de les afficher en fond de section, de rangée, de module… du moment où ça reste une image de fond, car nous allons utiliser la propriété CSS background-image, qu’il ne faut pas confondre avec la balise HTML <img>.

Voir la démo

Préparez le terrain

Dans les paramètres du module, de la section ou de la rangée

Optionnel mais recommandé : il est préférable d’ajouter un fond de couleur (Contenu -> Fond), si votre texte est blanc par exemple, afin de pouvoir le visualiser dans le builder (vu que l’image de fond sera ajoutée avec jQuery seulement lors du rendu de la page). Dans mon exemple, j’ai choisi le noir.

Maintenant, rendez-vous dans Avancé -> ID et classes CSS -> ID CSS et précisez fond-aleatoire (identifiant que vous pouvez modifier mais qui devra être également changé dans le code jQuery que vous ajouterez ensuite).

Préparez vos images

Si ce n’est pas encore fait, uploadez dans la bibliothèque de médias de WordPress les images que vous souhaitez utiliser.
Cliquez sur chaque image et récupérez leur URL respective. Vous pouvez, par exemple, les copier/coller dans un fichier texte que vous conserverez de côté le temps de mettre en place ce qui va suivre.

Ajoutez le jQuery

Insérez maintenant sur votre page un module code, dans lequel vous pouvez coller le code suivant :

<script type="text/javascript">

jQuery(document).ready(function($){
    
    var image = new Array ();
    image[0] = "/11/watercolor-background.jpg";
    image[1] = "/11/explosion-de-couleurs.jpg";
    image[2] = "/09/d72a91fe3554c325338224329074d89f.jpg";

    var hasard = Math.floor(Math.random() * image.length);

    $('#fond-aleatoire').css({'background-image': 'url(http://playground.divi-community.fr/wp-content/uploads/2017'   image[hasard]   ")"});

});

</script>

Détaillons un peu le code

Lignes 6 à 7 : mes 3 images sont définies dans une variable sous forme de tableau (array) afin de rendre le code plus facile à lire.
- Notez bien que la première image doit impérativement être numérotée 0
- Vous remarquerez que je n’ai pas uniquement précisé le nom du fichier, mais ai également inclus une partie de l’URL, étant donné que mes images ne sont pas toutes stockées dans le même dossier. Souvenez-vous de l’arborescence des médias de WordPress : /upload/année/mois
  Mais si toutes vos images sont dans le même dossier, vous n’avez qu’à inscrire le nom des fichiers (sans oublier l’extension).
Ligne 8 : juste pour info, la variable hasard dit qu’il faut sélectionner aléatoirement une image parmi la liste de la variable image.
Ligne 12 :
- tout d’abord, entre les premières parenthèses, nous retrouvons l’identifiant (#fond-aleatoire) de l’élément auquel nous allons changer l’image de fond.
- ensuite, entre les secondes parenthèses :
  - nous précisons la propriété CSS sur laquelle nous intervenons
  - puis sa valeur : url(https://…) qui correspond à la partie constante des URL des images.
    (Donc dans mon cas, elle s’arrête à l’année car, comme expliqué plus haut, le mois est variable)
  - et enfin, on ajoute un peu de hasard 🙂

Et si nous allions un peu plus loin ?

Voir la démo

Comment afficher aléatoirement une image <img>

Comme je le précisais au début de cet article, la méthode que je viens de présenter est valable pour les images de fond affichées en CSS.
Mais si vous avez besoin de l’appliquer à une “vraie” image, voici comment faire.

Dans le Divi Builder, ajoutez un module image puis, dans ses paramètres, allez dans Avancé -> ID et classes CSS -> ID CSS et inscrivez l’identifiant image-aleatoire
Vous pouvez faire d’autres réglages (dimensions, bordure, marges…) mais ne renseignez pas le champ URL de l’image.

Insérez maintenant sur votre page un module code, dans lequel vous pouvez coller le code suivant :

<script type="text/javascript">

jQuery(document).ready(function($){
 
 var image = new Array ();
 image[0] = "/11/watercolor-background.jpg";
 image[1] = "/11/explosion-de-couleurs.jpg";
 image[2] = "/09/d72a91fe3554c325338224329074d89f.jpg";

 var hasard = Math.floor(Math.random() * image.length);

 $('#image-aleatoire span img').attr('src', 'http://playground.divi-community.fr/wp-content/uploads/2017'   image[hasard]);

});

</script>

Détaillons un peu le code

C’est sensiblement le même code jQuery que pour les images de fond, les seules différences se trouvent à la ligne 12 :

Primo : le sélecteur CSS comprend notre identifiant #image-aleatoire plus span img, car l’image du module image de Divi est incluse dans une div, et c’est celle-ci qui reçoit l’identifiant CSS qu’on précise dans Avancé -> ID et classes CSS -> ID CSS. Il nous donc aller “chercher un peu plus loin”…
Secondo : on ne fait plus référence à des CSS mais à un attribut HTML (donc .attr) qui est src (soit l’URL du fichier image)

Comment changer aléatoirement une couleur de fond

Pour terminer, nous pouvons également reprendre notre premier exemple portant sur les images de fond et facilement l’adapter pour qu’il fonctionne avec les couleurs de fond.

Dans le Divi Builder, ajoutez ou choisissez une section, une rangée ou un module existants, puis dans ses paramètres, allez dans Avancé -> ID et classes CSS -> ID CSS et inscrivez l’identifiant couleur-aleatoire.
Vous pouvez effectuer tous les réglages qui vous semblent nécessaires, mais ne renseignez pas de couleur de fond dans Contenu -> Fond.

Insérez maintenant sur votre page un module code, dans lequel vous pouvez coller le code suivant :

<script type="text/javascript">

jQuery(document).ready(function($){
 
 var couleur = new Array ();
 couleur[0] = "#d9dbb3";
 couleur[1] = "#c3dbb3";
 couleur[2] = "#add1d3";

 var hasard = Math.floor(Math.random() * couleur.length);

 $('#couleur-aleatoire').css({'background-color': couleur[hasard]});

});

</script>

Détaillons un peu le code

Il s’agit donc d’une déclinaison du code jQuery pour les images de fond, avec comme différences :

Lignes 6 à 8 : on en renseigne plus des images mais des couleurs
- il faut donc changer le nom de la variable
- à la place des noms de fichiers, on cite des références hexadécimales (ou RGBA)
Ligne 10 : à la fin, penser à remplacer le nom de la variable pour utiliser couleur
Ligne 12 : on utilise notre identifiant CSS #couleur-aleatoire et l’attribut background-color vu qu’on veut modifier cette fois la couleur du fond

Pour conclure

Désormais, vous avez toutes les cartes en main pour décliner cette méthode avec les différents attributs CSS qui existent, ce qui laisse envisager un champ d’expérimentations extrêmement vaste !
Vous pouvez modifier les couleurs des titres, les hauteurs des sections, jouer sur les effets d’ombre, de flou, de déformation… Laissez libre cours à votre imagination, mais restez toujours raisonnable afin que cela ne desserve pas votre design. 😉

Ces tutoriels pourraient vous intéresser

Comment ?!
Vous n'utilisez pas encore Divi ?

Et bien, si vous prévoyez de l'acheter, nous avons des réductions pour vous…

10% sur la licence à vie

20% sur la licence annuelle

19 Commentaires

Etienne Charbonnier sur 8 juin 2018 à 18h54 pm

Bonjour,
J’ai eu un petit souci avec le code concernant le fond aléatoire. Je n’y connais absolument rien en Javascript mais je suis obstiné. Il semble que vous ayez oublié un guillemet dans la dernière ligne du code après +image[hasard]+)’};. Il faut écrire : +image[hasard]+’)’});
Pierre sur 11 juin 2018 à 10h59 am

Merci Etienne pour ta vigilance. Cela venait d’un bug du plugin qu’on utilise pour afficher les snippets de code…
Philippe Lambert sur 6 juillet 2018 à 09h44 am

Bonjour Pierre,

Désolé mais je doit être très c… mais le changement d’images de fond aléatoire ne fonctionne pas…

Pour le changement d’image dans le module image, no soucis !!

Une idée ?
Pierre sur 9 juillet 2018 à 12h27 pm

Bonjour Philippe.
Vérifie ton ID CSS, qu’il soit bien identique dans le builder (sans le #) et dans le code jQuery (avec le #).
Vérifie également qu’il n’y a pas d’erreur dans le chemin d’accès aux images sélectionnées.
Utilise les outils de développement de ton navigateur, notamment la console, pour voir s’il y a des erreurs JavaScript.
olivier sur 18 septembre 2018 à 16h07 pm

bonjour,
peut-on appliquer cette méthode pour les fonds d’articles de blog ?
Pierre sur 18 septembre 2018 à 17h22 pm

Bien sûr, il suffit d’utiliser le premier code jQuery pour changer l’image de fond et remplacer #fond-aleatoire par le sélecteur CSS adéquat.
Ça dépend si tu veux cibler tout le fond ou juste la partie gauche, ou aussi avec la sidebar… utilise les outils de développement de ton navigateur pour trouver le sélecteur CSS qui te conviendra.
Ludovic sur 15 octobre 2018 à 13h43 pm

Bonjour,
est-il possible d’adapter cette méthode à l’image d’arrière plus du site ce qui permettrait de la changer au fil de la navigation du site ?
Pierre sur 16 octobre 2018 à 11h04 am

Bien sûr, il suffit d’utiliser la première méthode avec l’image de fond et de préciser body comme identifiant à la ligne 2 à la place de #fond-aleatoire.
À tester, mais il faudra aussi sûrement ajouter en CSS background-size: cover; pour que l’image couvre bien tout le fond du site.
Ludovic sur 12 novembre 2018 à 17h07 pm

Bonjour Pierre,

merci pour cette info. Ça fonctionne parfaitement (même sans la modification du CSS) 🙂
Mais, si je comprends bien, il va falloir que je fasse ça pour chaque page du site, ce qui me prendra un temps fou à chaque changement d’arrière plan (si je veux un habillage saisonnier ou si je veux m’en servir pour de la com’ sur des opérations ponctuelles).
Y a t-il un moyen de faire une seule fois la manip’ pour l’ensemble du site ?

Merci d’avance
Ludovic sur 12 novembre 2018 à 18h57 pm

Oups, je n’avais pas pensé aux sections globales pour mettre ce bout de code sur chaque page et synchroniser les changements partout où la section a été importée…

Alors, ceci étant réglé, voici un autre souci, l’ajout d’une section pour ce bout de code ajoute un blanc inesthétique en base de page. Y a t-il une solution pour éviter ça ?
Cordialement
Ludovic sur 23 novembre 2018 à 14h57 pm

Réponse à mon problème enfin trouvée.

Il suffit de coller le code dans Divi>Options du Thème>Integration dans le champ “Ajouter ligne de code à la de votre blog”. 9a marche parfaitement, les changements sont rapides et il n’ya pas besoin de passer dans chaque page pour appliquer une section globale.
Pierre sur 19 février 2019 à 16h56 pm

Bonjour,
Est-ce possible de faire tourner aléatoirement les images à partir d’un module diapo et non d’un module image ?
L’idée étant d’avoir des images qui tournent aléatoirement, même sans rafraîchir la page.
Merci d’avance pour vos lumières si vous avez une idée =)
Julien sur 14 mars 2019 à 12h08 pm

Hello, mais sur un module diapo tu peux déja faire tourner les images aléatoirement?
Tenderete sur 10 décembre 2019 à 19h33 pm

Quelqu’un a-t-il testé si une section DIVI peut charger des images aléatoires avec cette procédure mais que la section est à effet parallèle?

Merci.
Pierre Bichet sur 12 décembre 2019 à 12h31 pm

Dans le principe, pas de raison que ça ne fonctionne pas. Il faut juste ajuster le sélecteur CSS pour cibler le bon élément en parallaxe.
Par exemple : #fond-aleatoire .et_parallax_bg
mertxe sur 30 avril 2020 à 16h21 pm

Just to thank you because this also helped on an Elementor built site! Added the JS as custom code in the same page, some custom CSS to have background-cover and position and it was all set.
John Hunter sur 2 juillet 2020 à 12h48 pm

Thanks for a great tip and tutorial Pierre – it works but (sorry this is asking a lot) I’d really like to have the background of my whole section changing automatically without a page refresh. Ideally slowly fading between images every 10-20seconds! The section contains several rows and modules so I cannot use a slider to do this.
C’est possible?
Louis sur 4 août 2020 à 10h38 am

Bonjour,
est-il aussi possible pour des mettre des vidéos aléatoires comme arrière plan? Est-ce que je dois changer quel que chose à la formule?
Merci d’avance
Louis
Pierre Bichet sur 4 août 2020 à 12h18 pm

Si tu es à l’aise avec jQuery, tu peux faire un mélange avec ce tutoriel.