Images de fond aléatoires CSS3
Je fais un petit site Web, mais j’ai comme 5-6 images pour mon fond, et je veux le rendre aléatoire chaque fois que j’actualise la page. C’est ce que j’ai dans style.css:
html { background: url(image/l2.jpg) no-repeat center center fixed -webkit-background-size: cover -moz-background-size: cover -o-background-size: cover background-size: cover } Vous ne pouvez pas utiliser que HTML et CSS à cette fin. Vous devriez le faire côté client (comme avec javascript) ou côté serveur (comme un script php)
Voici l’exemple php:
Voici un exemple de jquery:
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg']; $('html').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
Je voudrais utiliser JS. Jetez un oeil à cet exemple:
// Page Design
Vous devrez nommer vos images avec les nombres appropriés par le biais du nombre aléatoire et les placer dans le dossier des images.
Pour jQuery:
Option vraiment courte: (si vous pouvez utiliser php dans la page). Remplacez les noms de fichiers entre guillemets simples par les URL de vos arrière-plans.
background: url('');
Ce n’est pas possible avec du CSS pur. Vous devez utiliser javascript de manière aléatoire et définir l’image d’arrière-plan de votre site Web.
Eh bien, la dernière réponse est très courte, mais comment si vous les mettez dans un dossier?
Vous pouvez l’enregistrer dans un fichier et l’inclure pour utiliser le code de vos autres pages. Par exemple, vous enregistrez sous le nom “rand.htm”. Il suffit de remplacer la par ce code.