Background aléatoire

Fermé
Anne-Perrine C. - 16 janv. 2013 à 12:08
 Anne-Perrine C. - 23 janv. 2013 à 09:39
Bonjour,

J'ai beau essayer tous les codes trouvés dans les sujets recherchés : rien à faire, mes doigts sont empotés et étant donné que je n'y comprends pas fondamentalement-grand-chose-à tout-ça, je reste à fixer l'écran comme un bovidé sans trouver de solution... Si quelqu'un pouvait me porter secours, je lui en serai très reconnaissante :-(

Je cherche à réaliser un background aléatoire sur une page web.
J'ai constitué un dossier test d'images ici : http://www.ladebe.com/wordpress/sauvagegarage/test/background/
J'ai lu plusieurs choses et du coup, je ne sais plus quelle est la meilleure solution (javascript ? php ? css + php ?) Sachant que je voudrais pouvoir définir un peu les attributs de mon background (fixed, no-repeat, cover, etc.)

J'ai tenté un simple insert :

<style type='text/css'>
#contenu {
	background-image:url('<?php 
$bckImg=array('background/bg_1.jpg','background/bg_2.jpg','background/bg_3.jpg','background/bg_4.jpg','background/bg_5.jpg','background/bg_6.jpg');
echo array_rand($bckImg);
?>');
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
</style>


... et enregistré ma page en .php (parce que je crois qu'il faut qu'elle soit enregistrée en php d'après ce que j'ai pu lire...), mais cela ne fonctionne pas.
Auriez-vous une piste à me concéder s-il-vous-plaît ?

16 réponses

Anne-Perrine C.
16 janv. 2013 à 15:56
@ThEBiShOp : Euh... Eh bien en fait c'est sur une page, "index.php"...

@SkRo91 : Oui ! http://www.ladebe.com/wordpress/sauvagegarage/test/index.php

@tryan44 : Oui, merci beaucoup... Comme pour celui de SkRo91, cela ne semble pas fonctionner puisque l'image est toujours répétée :-(

Vraiment désolée et encore merci beaucoup à vous de m'aider comme ça ! C'est très gentil !
1
SkRo91 Messages postés 135 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 28 janvier 2013 39
16 janv. 2013 à 12:31
Salut,

Essaye ça pour ton echo : echo $bckImg[array_rand($bckImg)];
Sinon vérifie bien les chemins de tes différents images.

SkRo
0
Anne-Perrine C.
16 janv. 2013 à 13:10
Merci pour la répnse ! J'ai essayé l'echo que tu m'as donné mais cela n'a rien changé...
J'ai cependant réussi à faire fonctionner l'aléatoire grâce à cette page : http://creer-un-site.fr/afficher-une-image-aleatoirement-avec-du-php-et-css-185.php
Mais du coup je ne parviens pas à paramétrer l'affichage des images... Est-ce qu'il y aurait une erreur dans mon code ?

<style type='text/css'>
#body {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
</style>

<?php
$image = array("background/bg_1.jpg","background/bg_2.jpg","background/bg_3.jpg","background/bg_4.jpg", "background/bg_5.jpg", "background/bg_6.jpg","background/bg_7.jpg","background/bg_8.jpg","background/bg_9.jpg", "background/bg_10.jpg", "background/bg_11.jpg","background/bg_12.jpg","background/bg_13.jpg","background/bg_14.jpg", "background/bg_15.jpg", "background/bg_16.jpg","background/bg_17.jpg","background/bg_18.jpg","background/bg_19.jpg", "background/bg_20.jpg", "background/bg_21.jpg","background/bg_22.jpg","background/bg_23.jpg");
$affichage_aleatoire = $image[rand(0,22)]; 
?>

</head>

<body style="background: url('<?php echo $affichage_aleatoire; ?>');">
</body>
0
SkRo91 Messages postés 135 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 28 janvier 2013 39
16 janv. 2013 à 13:56
Tu veux dire que ton CSS ne marche pas du tout, ou que ça ne donne pas le résultat espéré ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Anne-Perrine C.
16 janv. 2013 à 13:59
Eh bien, ce que j'ai défini dans le <style type> ne semble pas pris en compte... é_è
La page : http://www.ladebe.com/wordpress/sauvagegarage/test/
0
SkRo91 Messages postés 135 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 28 janvier 2013 39
16 janv. 2013 à 14:04
Le truc c'est qu'habituellement j'utilise le CSS dans un fichier à part mais de ce que j'ai compris tu devrais mettre ton PHP entre les balises <style>
0
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
16 janv. 2013 à 14:22
Testez avec ça pour voir :
body { 
  margin:0;
  padding:0;
  background-repeat: no-repeat ;
  background-position: center; 
  background-attachment: fixed;
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
}

0
Anne-Perrine C.
16 janv. 2013 à 14:22
Toujours rien... J'ai mis le PHP entre les balises <style> et j'ai aussi essayé avec un fichier CSS à part contenant juste :

#body {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}


... mais mes background sont toujours répétés, trop larges, etc... :-(
Pardon, je suis vraiment une buse j'ai l'impression !
0
SkRo91 Messages postés 135 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 28 janvier 2013 39
16 janv. 2013 à 14:25
Nan nan desfois le code source fais des siennes sans savoir pourquoi donc nan, faut essayer plein de méthodes,

donc essaye dans ton CSS d'enlever le #

met juste body{
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;

}
0
Anne-Perrine C.
16 janv. 2013 à 14:31
Je viens d'essayer également sans les #, et même résultat... :-(
Est-ce que peut-être il me manquerait une mention quelque part sur la page PHP ?
J'ai bien mis la ligne d'appel :
<link href="style.css" rel="stylesheet" type="text/css" />


Et passé le contenu en :
 content="text/css;
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
16 janv. 2013 à 14:33
C'est quoi ta structure de fichiers ? Ton code php tu essayes de le mettre dans quel fichier ?
0
SkRo91 Messages postés 135 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 28 janvier 2013 39
16 janv. 2013 à 14:35
Oui ça parait logique mais ton fichier est bien .php ?
0
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
16 janv. 2013 à 14:54
Vous avez testé le code CSS que je donne plus haut?
0
Anne-Perrine C.
17 janv. 2013 à 16:30
Oui, testé mais sans résultat malheureusement :-(
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
16 janv. 2013 à 16:09
tu fais un appel à un fichier style.css, ton code css (et le code php du coup) tu le places dans ce fichier .css ou tu le mets dans ton fichier php ?
Si tu le mets dans ton fichier php, tu peux supprimer cet appel à style.css, bien que ça ne devrait pas créer de soucis...

tu peux essayer de te baser sur quelque chose comme ça, ça fonctionne :

<?php

$array = array('red', 'yellow', 'green', 'blue');

?>

<body style="background-color: <?php echo $array[array_rand($array)]; ?>;">
    blabla
</body>
0
SkRo91 Messages postés 135 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 28 janvier 2013 39
16 janv. 2013 à 17:09
Ouai ça peux marcher essaye ça.
0
Anne-Perrine C.
17 janv. 2013 à 16:31
Je vais tester la chose ! (excusez-moi pour mon absence, j'ai fait une mauvaise chute en sortant de chez moi et j'étais immobilisée depuis hier...)
0
Anne-Perrine C.
23 janv. 2013 à 09:22
Bonjour !

Voilà ce qu'il m'arrive assez souvent lorsque je travaille avec du code : une journée à m'arracher les cheveux ; je laisse passer quelques jours par dépit... et lorsque je m'y remets : boum ! j'arrive à ce que je veux en quelques minutes. Il n'y a pas vraiment d'explication à tout ça - peut-être le fait de laisser mijoter en l'esprit... Quoiqu'il en soit, voilà le code qui fonctionne chez moi :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/css; charset=utf-8" />
<title>Sauvage Garage</title>

<?php
//On classe les images dans un tableau
$image = array("images/bg_1.jpg","images/bg_2.jpg","images/bg_3.jpg","images/bg_4.jpg", "images/bg_5.jpg", "images/bg_6.jpg","images/bg_7.jpg","images/bg_8.jpg","images/bg_9.jpg", "images/bg_10.jpg", "images/bg_11.jpg","images/bg_12.jpg","images/bg_13.jpg","images/bg_14.jpg", "images/bg_15.jpg", "images/bg_16.jpg","images/bg_17.jpg","images/bg_18.jpg","images/bg_19.jpg", "images/bg_20.jpg", "images/bg_21.jpg","images/bg_22.jpg","images/bg_23.jpg");
//on fait un trie aléatoire
$affichage_aleatoire = $image[rand(0,22)]; 
?>
</head>

<body style="background: url('<?php echo $affichage_aleatoire; ?>'); background-repeat:no-repeat; background-position:center; background-attachment:fixed; background-size:cover;">
</body>
</html>


Et le lien de la page : http://sauvagegarage.free.fr/test/
(Pas encore testé sous Opéra, Safari, etc.)

Merci encore à vous tous / toutes pour votre aide et votre écoute !
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
23 janv. 2013 à 09:30
Bonjour,

je te conseille tout de même de considérer la formule que je t'avais donné, à savoir, adapté à ton cas :
$affichage_aleatoire = $image[array_rand($image)];


et ce pour une raison simple : si demain tu décides de rajouter des images dans ton tableau, ou pire, d'en enlever, tu risques d'avoir des soucis, voire des bugs.
Avec ce que je te propose, tu ne te soucis pas du nombre d'éléments que tu as, tu peux modifier ton tableau comme tu le souhaites.
C'est juste pour avoir un code plus souple.
0
Anne-Perrine C.
23 janv. 2013 à 09:39
C'est corrigé ! Tu as raison :-)
Merci !
0
SkRo91 Messages postés 135 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 28 janvier 2013 39
23 janv. 2013 à 09:34
De rien, tant mieux que tu ai trouvé la solution.

Bonne continuation
SkRo
0