CSS : le raccourci "background" enrichi 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 boite 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 mais aussi background-size (nouveauté)

Utilisation de la méga propriété background

Une boite contenant 5 images positionnées proprement !

Le code correspondant

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 car il y a insertion de cinq images dans cette boite.
Pour chaque image on précise son chemin relatif, le terme no-repeat (pour que l'insertion soit unique), le positionnement de l'image sur les deux axes (axe X, axe Y).
Ici les images sont intégrées avec leur taille réelle : pas de redimensionnement. Donc avec un ordiphone c'est très moche !!!

Les différentes images ont été produites avec Inkscape à partir de la même photo.
A chaque fois un filtre a été applqué à la photo puis il y a eu exportation au format PNG de la nouvelle image.

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.
On peut redimensionner les images insérées.

Ci-dessus boite remplie de rose et avec trois images positionnées et redimensionnées.

Le code correspondant

Pour chaque propriété préfixée "background" on a trois valeurs séparées par des virgules.
Pourquoi trois ? Parce qu'il y a trois images insérées !
Remarquez les différentes façons d'exprimer le positionnement de chaque image : en pixels, avec des mots clés voire en pourcentages. A chaque fois il y a couple X,Y pour préciser la position dans le repère cartésien.
Notez les différentes façons d'exprimer la largeur de chaque image : en pixels ou en pourcentage.

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 le "background" d'une boite qui fait 100% de large (par rapport à BODY) par 500px. Que faire ???

Avant la solution était de redimensionner l'image aux dimensions de la boite avec un logiciel tel paint.
Avec CSS3 il suffit d'utiliser la nouvelle propriété CSS background-size avec la valeur cover.

Nous voulons aussi toujours dans la boite, insérer mais cette fois en premier plan, deux gifs animés susceptibles d'être déplacés via une animation CSS.
Il faut donc que ces images soient des éléments de la page. Il faut alors utiliser la balise IMG à l'intérieur du DIV conjointement avec les propriétés position : absolute; top & left : positionnement en absolu des images dans le DIV.

Solution

Le code correspondant

La balise DIV contient deux éléments IMG.

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.

Les gifs animés sont redimensionnés et positionnés en absolu dans le DIV.
Attention cela suppose que la boite DIV soit elle-même positionnée en absolu (ou relatif ou fixe)

Avec CSS3 la propriété background peut avoir aussi commme paramètres linear-gradient OU radial-gradient afin de définir un dégradé linéaire ou radial : les dégradés en CSS3
Retour menu