HTML - modifier le background de mon site

Résolu/Fermé

DarkChou Messages postés 34 Date d'inscription lundi 2 janvier 2017 Statut Membre Dernière intervention 17 novembre 2017 - Modifié par DarkChou le 2/01/2017 à 19:31
DarkChou Messages postés 34 Date d'inscription lundi 2 janvier 2017 Statut Membre Dernière intervention 17 novembre 2017 - 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 : 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:

HTML - modifier le background de mon site
Site de telechargement - Guide
Modifier liste déroulante excel - Guide
Site de vente entre particulier - Guide
Comment modifier un pdf - Guide
Site inaccessible - Guide

1 réponse

Réponse 1 / 1

Utilisateur anonyme
2 janv. 2017 à 19:12

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.

DarkChou Messages postés 34 Date d'inscription lundi 2 janvier 2017 Statut Membre Dernière intervention 17 novembre 2017 3
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 Messages postés 34 Date d'inscription lundi 2 janvier 2017 Statut Membre Dernière intervention 17 novembre 2017 3
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 ^^ )

Utilisateur anonyme
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 Messages postés 34 Date d'inscription lundi 2 janvier 2017 Statut Membre Dernière intervention 17 novembre 2017 3
10 janv. 2017 à 14:48

Merci pour ton aide :) j'ai pu resoudre le probleme ^^

Discussions similaires

'Votre colis est dans le site de livraison qui dessert votre adresse' que faire

Colis en cours de transport vers votre site de livraison ?

adele

Chemin Logo du site de la Cité de l'espace

Discussions similaires

Newsletters