HTML - modifier le background de mon site

Résolu
DarkChou Messages postés 34 Date d'inscription   Statut Membre Dernière intervention   -  
DarkChou Messages postés 34 Date d'inscription   Statut Membre Dernière intervention   -
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 :/ )
A voir également:

1 réponse

Réponse 1 / 1
Utilisateur anonyme
 
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
DarkChou Messages postés 34 Date d'inscription   Statut Membre Dernière intervention   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
0
DarkChou Messages postés 34 Date d'inscription   Statut Membre Dernière intervention   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 ^^ )
0
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...
0
DarkChou Messages postés 34 Date d'inscription   Statut Membre Dernière intervention   3
 
Merci pour ton aide :) j'ai pu resoudre le probleme ^^
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses