CSS Background "aléatoire"

alexislevrai Messages postés 557 Date d'inscription Statut Membre Dernière intervention -
valdoucalours Messages postés 4 Date d'inscription Statut Membre Dernière intervention - 18 nov. 2011 à 11:41

Bonjour a tous & à toutes,

après avoir passé plus de la moitié de la journée a remuer le net pour trouver comment avoir une image en aléatoire, je me retourne vers vous pour votre aide:

Donc voilà j'ai une <div> avec un background désigné dans ma CSS, et je voudrais que cette image soit aléatoires.

#contenu {
    background-image:url(/wp-content/themes/madouce/media/contenu.png);
    background-repeat: no-repeat;
    background-attachment:center;
    position: absolute;
    width:1147px;
    height:734px;
    left: 50%;
    top:-1px;
    margin-left: -574px;
}

Quelqu'un aurait une idée ?

Afficher la suite

A voir également:

CSS Background "aléatoire"
Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
Excel générer mot de passe aléatoire - Forum Excel
Starter background changer - Télécharger - Thèmes & Fonds d'écran
John's background switcher - Télécharger - Suite bureautique
Tirage au sort excel aléatoire sans doublon - Forum LibreOffice / OpenOffice

23 réponses

Réponse 1 / 23

valdoucalours Messages postés 4 Date d'inscription Statut Membre Dernière intervention 9

Pour mettre un background image aléatoire je te conseil plutot d'utiliser javascript que php car c'est éxécuté du cotés client et c'est toujours ça à faire en moins pour ton serveur.

Réponse 2 / 23

Smoking bird Messages postés 870 Date d'inscription Statut Membre Dernière intervention 58

salut toi, la forme?^^

utilise php!

tu peux mettre tes images dans un dossier, demander à php de les récupérer dans un tableau et de sélectionner une valeur aléatoire dans ce tableau pour afficher l'image, bien entendu ce code devra générer une réponse dans un document php, donc ta règle css ne sera pas dans un fichier css^^

Réponse 3 / 23

alexislevrai Messages postés 557 Date d'inscription Statut Membre Dernière intervention 51

Ouais ca va nikel, et toi ?

OUTCH ! ce que tu me sort là est hardos, je suis pas sûr de pouvoir le générer :S

C'est comme ceci en fait ? https://forum.alsacreations.com/topic-1-36948-1-Background--CSS-aleatoire-suis-perdu.html

Réponse 4 / 23

Smoking bird Messages postés 870 Date d'inscription Statut Membre Dernière intervention 58

ça va : o)

ça ressemble à ceci en effet^^, combien as tu d'images de fond pour ta sélec?

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

Posez votre question

Réponse 5 / 23

alexislevrai Messages postés 557 Date d'inscription Statut Membre Dernière intervention 51

Pour le moment 3, mais j'en aurais tout au plus 5/6.

Réponse 6 / 23

Smoking bird Messages postés 870 Date d'inscription Statut Membre Dernière intervention 58

okay, voyons simple, tu t'y connais un peu en php?

si oui, on passe direct à la suite, sinon, j'te refais les fondamentaux rapides^^

<DTD>
<html>
<head>
<style type='text/css'>
#contenu {
background-image:url('
<?php
$bckImg=array('image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg','image6.jpg');
echo array_rand($bckImg);
?>
');
}
</style>
</head>
<body>

</body>
</html>

tente ça, ça devrait fonctionner^^, si non on peaufine (je l'ai pas testé^^)

Réponse 7 / 23

alexislevrai Messages postés 557 Date d'inscription Statut Membre Dernière intervention 51

Je pense comprendre; mais proposé si gentiment, je veux bien les fondamentaux rapidos :D

Réponse 8 / 23

Smoking bird Messages postés 870 Date d'inscription Statut Membre Dernière intervention 58

ptdr j'suis vénère, deezer vient de me planter opera -_-

bref, ce sera une version un peu plus expéditive du coup :s

Tous les docs concernés par ce code, ceux qui ont besoin d'une sélection aléatoire de background donc, doivent avoir l'extension .php (au lieu de html par exemple, je sais pas sur quoi tu travailles^^)

Un code php est interprété s'il se retrouve entre <?php et ?>, sinon il ne le sera pas. On peut mettre autre chose que du php dans ces balises d'ouverture et de fermeture, mais ça doit se plier aux règles du langage php
Exemple valide:
<?php
echo "<img src='tonimage.png'/>";
?>
exemple invalide:
<?php
<img src='tonimage.png'/>
?>
Dans les deux exemples on a du html, mais seul le premier est valide car c'est du html interprété par le php et renvoyé comme il faut^^

Donc, que fait le code que je t'ai écris?
Il sélectionne un champ aléatoire dans un tableau, un tableau qui contient le nom des images que tu utiliseras en background.
Ce code doit être placé dans la balise head, entre les balises <style type='text/css'> et </style>, histoire d'indiquer qu'on met du css (même s'il y a du php dedans, ce n'est pas contradictoire, mais c'est une autre histoire : o))

Concrètement:
on créé un tableau d'images ( array('image.jpg',...) ) qu'on place dans la variable $bckImg, qui nous permettra de se référer à ce tableau et de bosser dessus, et une fois qu'on a accès facilement à notre tableau, on récupère la valeur aléatoire avec la fonction array_rand($bckImg) (elle contient en argument le tableau qu'on a créé) et on l'affiche en faisant précéder cette fonction de echo

Besoin de plus amples explications? : o)

Réponse 9 / 23

alexislevrai Messages postés 557 Date d'inscription Statut Membre Dernière intervention 51

Tes explications sont très claires ;)

Seulement ... ça ne veux pas ... j'ai ajouter ceci.

<style type='text/css'>
#contenu {
background-image:url('
<?php
$bckImg=array('http://www.ma-douce.fr/wp-content/themes/madouce/background/image_1.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_2.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_3.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_4.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_5.png','image6.jpg');
echo array_rand($bckImg);
?>
');
position: absolute;
width:1147px;
height:734px;
left: 50%;
top:-1px;
margin-left: -574px;
}
</style>

Réponse 10 / 23

Smoking bird Messages postés 870 Date d'inscription Statut Membre Dernière intervention 58

tu t'es planté là dessus : (en gras)

<style type='text/css'>
#contenu {
background-image:url('
<?php
$bckImg=array('http://www.ma-douce.fr/wp-content/themes/madouce/background/image_1.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_2.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_3.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_4.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_5.png','image6.jpg');
echo array_rand($bckImg);
?>
position: absolute;
width:1147px;
height:734px;
left: 50%;
top:-1px;
margin-left: -574px;
');
}
</style>

remplace par:

<style type='text/css'>
#contenu {
background-image:url('
<?php
$bckImg=array('http://www.ma-douce.fr/wp-content/themes/madouce/background/image_1.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_2.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_3.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_4.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_5.png','image6.jpg');
echo array_rand($bckImg);
?>');
position: absolute;
width:1147px;
height:734px;
left: 50%;
top:-1px;
margin-left: -574px;
}
</style>

Réponse 11 / 23

alexislevrai Messages postés 557 Date d'inscription Statut Membre Dernière intervention 51

Mais même =(

http://ww12.ma-douce.fr

Réponse 12 / 23

Smoking bird Messages postés 870 Date d'inscription Statut Membre Dernière intervention 58

okay je vois, remplace:

echo array_rand($bckImg);
?>

par

$img=array_rand($bckImg);
echo $img[0];
?>

et dis moi ce que ça fait^^

Réponse 13 / 23

Smoking bird Messages postés 870 Date d'inscription Statut Membre Dernière intervention 58

j'mé planté^^

si ça fonctionne pas, fais:

$img=array_rand($bckImg);
echo $bckImg[$img[0]];
?>

Réponse 14 / 23

alexislevrai Messages postés 557 Date d'inscription Statut Membre Dernière intervention 51

Ca fait .... PAREIL ! =D

Réponse 15 / 23

alexislevrai Messages postés 557 Date d'inscription Statut Membre Dernière intervention 51

GRRRR, toujours pareil !

<style type='text/css'>
#contenu {
background-image:url('
<?php
$bckImg=array('http://www.ma-douce.fr/wp-content/themes/madouce/background/image_1.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_2.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_3.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_4.png','http://www.ma-douce.fr/wp-content/themes/madouce/background/image_5.png','image6.jpg');
$img=array_rand($bckImg); 
echo $bckImg[$img[0]]; 
?>');
position: absolute;
width:1147px;
height:734px;
left: 50%;
top:-1px;
margin-left: -574px;
}
</style>

Réponse 16 / 23

Smoking bird Messages postés 870 Date d'inscription Statut Membre Dernière intervention 58

c'est une technique nouvelle par rapport à celle que j'utilise d'habitude, c'est pour ça que le résultat est pas immédiat ;) j'expérimente :p

remplace:
$img=array_rand($bckImg);
echo $bckImg[$img[0]];
?>');

par:

echo $bckImg[array_rand($bckImg)];
?>');

Réponse 17 / 23

alexislevrai Messages postés 557 Date d'inscription Statut Membre Dernière intervention 51

Ne te cherche pas des excuses ;)

Sinon ... le problème persiste =(

Réponse 18 / 23

Smoking bird Messages postés 870 Date d'inscription Statut Membre Dernière intervention 58

ptdr j'te zut mon pote :D

#contenu {
background-image:url('
<?php

par

#contenu {
background-image:url('<?php

la sélection d'images se fait mais le saut à la ligne bloquait le délire^^

Réponse 19 / 23

alexislevrai Messages postés 557 Date d'inscription Statut Membre Dernière intervention 51

Tu gère du Biftek mec !

Merci beaucoup ;)

Sinon, comme d'hab' si tu as besoin de quoi que ce soit pour de la créea visuelle, n'hésite pas ;)

Réponse 20 / 23

Smoking bird Messages postés 870 Date d'inscription Statut Membre Dernière intervention 58

ptdr :D j't'en prie^^

j'ai pas oublié pour la créa visuelle ;) j'te tiendrais au courant si besoin est^^
Et si t'as d'autres soucis, fais moi venir sur tes posts^^

Discussions similaires

tirage aléatoire sans doublon

Background color css

Formule "alea entre bornes" sans doublon.

Tirage au sorte d'un nom dans une liste sans répetition - excel

Task host windows, c'est quoi ?

Votre réponse

Discussions similaires