Comment afficher un fond d'écran aléatoire en HTML et JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-05-14 12:45:16

Question

Comment faire pour afficher un fond d'écran aléatoire en HTML et JavaScript ?

Réponse

Pour afficher un fond d'écran aléatoire sur une page HTML, vous pouvez utiliser la fonction JavaScript Math.random().

Dans l'exemple ci-dessous les trois fonds d'écran aléatoires sont dans le même répertoire que la page HTML.

On crée un tableau (un array) dans lequel on définit les images :

images = ['1.jpg','2.jpg','3.jpg'];

Puis on sélectionne avec la fonction random() l'une des images de manière aléatoire.

i = Math.floor(Math.random()*images.length);

On applique ensuite l'image à la balise <body> via les propriétés CSS backgroundImage et backgroundSize, en utilisant l'objet JavaScript style :

body.style.backgroundImage = 'url(' + images[i] + ')';
body.style.backgroundSize = 'cover';

Voici un exemple :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment afficher un fond d'écran aléatoire en HTML et JavaScript ?</title>
</head>  
<body>
<script>
var body = document.getElementsByTagName('body')[0];
images = ['1.jpg','2.jpg','3.jpg'];
i = Math.floor(Math.random()*images.length);
body.style.backgroundImage = 'url(' + images[i] + ')';
body.style.backgroundSize = 'cover';
</script>
</body>
</html>

Remarque : Vous pouvez modifier les fonds d'écran aléatoires à afficher sur la page HTML via la ligne :

images = ['1.jpg','2.jpg','3.jpg'];