CSS : le raccourci "background" dans la version 3

La méga propriété "background" est notablement enrichie dans la version 3.

Images de fond multiples

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 préfixées "background" : background-image, background-color, background-repeat, background-position et aussi background-size (nouveauté)

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> ...

Pour la boite 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 ...

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

On peut utiliser les propriétés simples plutôt que la méga propriété 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> ...

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.

Adapter l'image de fond unique à son conteneur

Dans la section précédente vous avez découvert la nouvelle composante de background : background-size. La valeur de cette propriété peut être aussi "cover".

Problématique

Nous avons une image qui fait 700 pixels par 437.
Et nous voulons que cette image devienne l'arrière plan d'une boite qui fait 90% de large (par rapport à BODY) par 500px. Que faire ???

Avant la solution était de redimensionner l'image aux dimensions de la boîte avec un logiciel tel paint.
Avec CSS3 il suffit d'utiliser la nouvelle propriété CSS background-size avec la valeur cover pour que la taille de l'image s'adapte à celle de la boite et même si la largeur de ladite boite est exprimée en % !

L'image d'origine

L'image fait 700px par 437px !

Solution

Le code correspondant

Une seule instruction HTML (mais avec beaucoup de CSS) :

<div style= "width : 100% ; height :500px; background-image :url(../images/paysage_hiver.jpg) ; background-size : cover ; border :1px solid black ; margin : 20px auto 20px auto ;" >

La taille de l'image de fond s'adapte parfaitement aux dimensions de la boite DIV !
La nouveauté : la propriété background-size avec la valeur cover.
Retour menu