Plusieurs images d'arrière plan dans une boîte

Désormais il est possible d'avoir en arrière plan d'une boîte plusieurs images !
On peut utiliser le raccourci background ou les différentes propriétés : background-image, background-repeat, background-size, background-position

Utilisation de la méga propriété background

Une boîte contenant 5 images positionnées proprement !

Le code correspondant

... <style> div {width : 100% ; height : 600px ; border : 1px solid black ; } div img#nus {width :15%;} #nus{background: url(../images/nue1.png) no-repeat top left, url(../images/nue2.png) no-repeat top right, url(../images/nue3.png) no-repeat bottom left, url(../images/nue4.png) no-repeat center center, url(../images/nue5.png) no-repeat bottom right ; background-color : purple ; } ... <div id = 'nus' > </div> ...

Commentaire

Pour la boîte identifiée nus la méga propriété CSS background comprend cinq séries de valeurs séparées par une virgule donc il y a insertion de cinq images dans la boîte.
Pour chaque série de valeurs on retrouve le chemin de l'image, no-repeat (pour que l'insertion soit unique), le positionnement de l'image sur les deux axes.
Ici les images sont insérées avec leur taille réelle : pas de redimensionnement. Donc avec un petit écran les images se superposent ce qui est génant ... Pour la solution : voir exemple suivant !

Utiliser les propriétés background-image, background-position, background-size, etc.

On peut utiliser les propriétés simples plutôt que le raccourci background !

Boite remplie de rose et avec trois images positionnées et redimensionnées.

Le code correspondant

#cartes { background-image : url(../images/as_pique.jpg) , url(../images/as_coeur.jpg), url(../images/as_trefle.jpg); background-position : 0px 0px, center center, 100% 100% ; background-repeat : no-repeat, no-repeat, no-repeat; background-size : 15%, 100px, 20% ; background-color : pink ; } ... <div id ="cartes"> </div> ...

Commentaire

Les valeurs des propriétés background-image, background-position, backgroung-repeat, background-size sont à chaque fois une série de 3 séparées par une virgule.
Pourquoi 3 ? Parce qu'il y a trois images d'insérées !
Remarquez les différentes façons d'exprimer le positionnement de chaque image : en pixels, avec des mots clés, en pourcentages.
Notez les différentes façons d'exprimer la largeur de chaque image : en % du conteneur ou en pixels
Retour menu