Tutoriel CSS - sommaire

CSS : le raccourci "background" enrichi dans la version 3

Méga propriété background : révisions

Exemple

Le code correspondant

Si vous voulez superposer du texte sur une image il faut créer une boite contenant l'image via la propriété background
Cette image doit être relativement transparente afin que le texte reste lisible.
Par défaut si l'image est plus petite que la boite (comme dans l'exemple) elle est répétée par défaut sur les deux axes.

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).
On peut combiner des images et une couleur de fond en "background". Ici un fond de couleur "purple".
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 (ou couple de 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" ou "contain".
C'est assez subtil, vous allez voir ...

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 80% de large (par rapport à BODY) par 500px. Que faire ???
L'image ci-dessous :

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

L'image est rognée à droite !

Le code correspondant

La balise DIV contient deux éléments IMG. <div style= "width : 80% ; height :500px; background-image :url(../images/paysage_hiver.jpg) ; background-size : cover ; border : 1px solid black ; background-repeat : no-repeat; margin : 20px auto ; position : relative;" > <img src ="../images/fondeur.gif" style ="position : absolute ; top: 400px; left : 50%; width : 8%;" /> <img src ="../images/fondeur2.gif" style ="position : absolute ; top: 400px; left : 80%; width : 8%;" /> </div>

L'image de fond s'adapte à son conteneur (boite DIV) moyennant un éventuel rognage.
La nouveauté ici : la propriété background-size prend la valeur cover. Il existe aussi la valeur "contain".

Les gifs animés sont redimensionnés et positionnés par rapport à l'angle haut gauche du DIV car celle-ci est elle-même positionnée en absolu (ou relatif ou fixe)

Solution avec background : contain

Le code est strictement le même sauf que background-size vaut "contain".

L'image de fond n'est pas rognée mais une grande bande blanche en bas du conteneur.
Les proportions de l'image étant différentes de celles de son conteneur, celle-ci n'occupe pas tout le conteneur.
La première solution est quand même beaucoup plus satisfaisante surtout un écran très étroit ; réduisez la largeur de la fenêtre et observez ...