HTML - modifier le background de mon site [Résolu/Fermé]

Signaler
Messages postés
34
Date d'inscription
lundi 2 janvier 2017
Statut
Membre
Dernière intervention
17 novembre 2017
-
Messages postés
34
Date d'inscription
lundi 2 janvier 2017
Statut
Membre
Dernière intervention
17 novembre 2017
-
Bonjour,

je voudrai savoir quel bout de code html dois-je utiliser pour avoir une image différent sur mon site web a chaque nouvelle visite svp , je ne sais pas trop comment m'expliquer donc je vais vous montrer un exemple ^^'

( exemple : https://www.elderscrollsonline.com/fr/agegate ) comme vous le voyer a chaque fois que vous actualiser cet page le backgr change , si jamais vous pourriez m'aider je vous en serai infiniment reconnaissant

( désoler des fautes :/ )

1 réponse


Il faut utiliser du PHP, le principe est juste de faire une liste des images qui serviront au background, de faire un tirage aléatoire de cette liste pour avoir une image au hasard, et de mettre l'image comme fond directement en HTML ou en modifiant du CSS.
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
34
Date d'inscription
lundi 2 janvier 2017
Statut
Membre
Dernière intervention
17 novembre 2017
3
Merci beaucoup d'avoir répondu aussi rapidement , je suis désoler j'ai oublier de préciser que je suis un débutants dans tous sa ^^' je n'y connais rien au php :/ pourrais-tu m'expliquer la marge a suivre si cela ne vous dérange pas s.v.p
Messages postés
34
Date d'inscription
lundi 2 janvier 2017
Statut
Membre
Dernière intervention
17 novembre 2017
3
encore merci d'avoir répondu aussi vite , j’avais trouver un code en php mais j'ai pas réussi a le faire fonctionner :/

<?php
header('Cache-Control: no-cache');
$imgs = array(
'image1.gif',
'image2.png',
'image3.jpeg',
'image4.gif'
);
$img_id = mt_rand(0,(count($imgs)-1));
header('Location: '.$imgs[$img_id]);
?>


mais entre temp j'ai trouver un autre code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>background image aléatoire</title>
<style>
/* adapte l'image de fond
sur la largeur et la hauteur
de la page html */
body, html{
background-size: cover;
width:100%;
height:100%;
padding:0;
margin:0;
}
</style>
<script src=""quot;https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
var bgImage = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
]
$( function() {
// nombre max d'images que le tableau bgImage contient
var bgCount = bgImage.length-1;

do{
// change d'image aléatoirement
index = Math.floor((Math.random() * bgCount) );

// recommence a changer d'image si celle d'avant etait la meme
}while( index == localStorage.getItem("lastIndex") )

// mémorise la nouvelle image pour comparer
// au prochain rechargement de la page
localStorage.setItem("lastIndex",index);

// met une image de fond dans la page html
$( "body" ).css('background-image', "url("+bgImage[index]+")");
});
</script>
</head>
<body>
</body>
</html>


mais j'ai un petit soucis avec se code , je les tester avec 4 image en local j'ai fais plusieurs essaie , ils fonctionne correctement mais le problème c que sur les 4 image , seulement ' image2 ' et 'image3' apparait tout le temps , ' image1 ' apparait de temps en temps mais ' image4 ' pas du tout :/ existe t'il une façon de faire pour être sur que tout les image sois a la même fréquence ? fin je veut dire que je suis sur que tout les image apparaitra quand j'actualise

( ps : encore merci j'aurai pas trouver si tu n’avais pas repondu ^^ )
Utilisateur anonyme
Tu peux faire en fonction du temps comme ceci:

header('Cache-Control: no-cache');
$imgs = array(
'image1.gif',
'image2.png',
'image3.jpeg',
'image4.gif'
);
$img_id = time()%count($imgs);
header('Location: '.$imgs[$img_id]);


Après je te déconseille de le faire en JS c'est jamais top de car il suffit que l'utilisateur désactive le JS ou que son PC bug au chargement pour que le background n'apparaise pas...
Messages postés
34
Date d'inscription
lundi 2 janvier 2017
Statut
Membre
Dernière intervention
17 novembre 2017
3
Merci pour ton aide :) j'ai pu resoudre le probleme ^^