28172 sujets

CSS et mise en forme, CSS3

Background aléatoire et qui s'adapte à la résolution d'écran

Bonjour à tous,

J'ai mon code qui me permet d'avoir mon image de fond qui est fixe et qui s'adapte à la résolution d'écran :
body {
 	 margin:0;
	  padding:0;
	  background: url(back.jpg) no-repeat center 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 */
}


Mais j'aimerais pouvoir faire en sorte que cette image soit aléatoire lors du chargement de la page.
J'ai trouvé ceci :
<?php
$bckImg=array('back.jpg.jpg','back2.jpg','back3.jpg');
echo array_rand($bckImg);
?>
');

mais je n'arrive pas à l'intégrer dans mon premier code...
Une idée ? Smiley decu
Merci beaucoup pour votre aide
salut,
il faudrait écrire tes styles en ligne ou alors attribuer une classe et associer chacune d'elles au background correspondant (plus long ?)

<body style="background-image:url(<?php echo array_rand($bckImg); ?>);">
Modérateur
Salut,

Hum.... Dégueu comme écriture et à vu de nez, ça ne fonctionnera pas.....

<body style="background-image:url(<?php echo array_rand($bckImg); ?>);">


Sinon, j'écrirai comme ceci :

//....
//etc.
$bg = array('bgBodyBack','bgBodyBack2','bgBodyExotique','bgBodyBEtc');
//....
//etc.


<style>
/*etc.*/
*[class^=bgBody]{
	background: url(back.jpg) no-repeat center fixed;
	-webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover;background-size: cover; 
}

.bgBodyBack{background-image:url(back.jpg);}
.bgBodyBack2{background-image:url(back2.jpg);}
.bgBodyExotique{background-image:url(exotique.jpg);}
.bgBodyBEtc{background-image:url(etc.jpg);}
/*etc.*/
</style>

<body class="<?php echo $bg[array_rand($bg)] ?>">
<!-- etc. -->

Modifié par niuxe (15 Jul 2014 - 20:57)
En quoi c'est dégeu ?
J'ai juste fait un copier/coller de flemmard c'est bien sûr 

<body style="background-image:url(<?php echo $bckImg[array_rand($bckImg)]; ?>);">

À supposer qu'il y ait plus d'images, le processus sera plus long inutilement.
Pourquoi aussi passer par un sélecteur CSS3 quand tu sais que tu ne cibleras que le <body> ?
Il faudra juste veiller à ne pas écraser la règle avec le raccourci "background" et écrire chacune distinctement.
Modérateur
Zelalsan a écrit :
En quoi c'est dégeu ?
J'ai juste fait un copier/coller de flemmard c'est bien sûr 

&lt;body style=&quot;background-image:url(&lt;?php echo $bckImg[array_rand($bckImg)]; ?&gt;);&quot;&gt;

À supposer qu'il y ait plus d'images, le processus sera plus long inutilement.
Pourquoi aussi passer par un sélecteur CSS3 quand tu sais que tu ne cibleras que le &lt;body&gt; ?
Il faudra juste veiller à ne pas écraser la règle avec le raccourci &quot;background&quot; et écrire chacune distinctement.


Salut,

désolé si je réponds tardivement.

1. pas de séparation du contenu et de la mise en forme. Pour la maintenance et le débogage, ça va être sympa à faire... Pour info, je suis sur un projet et c'est le gros bordel. Il y a ce type d'écriture entres autres.

2. Ce n'est pas un sélecteur CSS3 comme tu le prétends. C'est du CSS2 ! IE8 comprend très bien cette syntaxe.

3. perso je factorise le plus possible. d'où cette écriture. Smiley cligne
@niuxe>
1- Mwéé... Il s'agit d'un unique "background-image" résultant d'un tableau préétabli qui s'applique invariablement sur le <body>. Je ne vois pas où sera le souci lié à une éventuelle maintenance. C'est bien plus simple à mes yeux que d'essayer de suivre bibliquement des phrases du genre "le css dans l'attribut style c'est mal...". S'il y avait une centaine d'images ferais-tu la même chose ?

2- Je ne suis pas certain de ce que tu avances. Ce n'est pas parce que IE8,7 l'interprète que ce n'est pas du CSS3. C'est un peu la même chose pour le sélecteur d'adjacence "~". Ce que je voulais surtout dire, c'est que

*[class^=bgBody] {}

équivaut à (déjà)

[class^=bgBody] {}

mais surtout beaucoup plus simplement à

body {}


3- Oui, dans l'extrême majorité des cas l'écriture se fait ainsi mais là on a un "background-image" aléatoire qui ne s'appliquera que sur le <body> et qui ne sera plus retouché ailleurs dans le CSS. Donc quelle est concrètement l'utilité de cette écriture si ce n'est s'encombrer avec des tas d'autres lignes et des classes alors qu'on pourrait centraliser le tout ?
Sujet clos
Aller à