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

DarkChou 34 Messages postés lundi 2 janvier 2017Date d'inscription 17 novembre 2017 Dernière intervention - 2 janv. 2017 à 18:55 - Dernière réponse : DarkChou 34 Messages postés lundi 2 janvier 2017Date d'inscription 17 novembre 2017 Dernière intervention
- 10 janv. 2017 à 14:48
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 : http://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 :/ )
Afficher la suite 

5 réponses

Répondre au sujet
ZeNairolf 1696 Messages postés vendredi 6 mars 2009Date d'inscription 1 novembre 2017 Dernière intervention - 2 janv. 2017 à 19:12
+1
Utile
4
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.
Cette réponse vous a-t-elle aidé ?  
DarkChou 34 Messages postés lundi 2 janvier 2017Date d'inscription 17 novembre 2017 Dernière intervention - 2 janv. 2017 à 19:21
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
DarkChou 34 Messages postés lundi 2 janvier 2017Date d'inscription 17 novembre 2017 Dernière intervention - 2 janv. 2017 à 22:43
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 ^^ )
ZeNairolf 1696 Messages postés vendredi 6 mars 2009Date d'inscription 1 novembre 2017 Dernière intervention - 2 janv. 2017 à 23:45
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...
DarkChou 34 Messages postés lundi 2 janvier 2017Date d'inscription 17 novembre 2017 Dernière intervention - 10 janv. 2017 à 14:48
Merci pour ton aide :) j'ai pu resoudre le probleme ^^
Commenter la réponse de ZeNairolf