Tutoriel CSS3 - sommaire

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

Lorsque vous voulez insérer une image dans une page web, vous pensez forcément à la balise IMG. Mais dois-je rappeler qu'il y a une autre solution : créer une boite et lui attribuer la propriété background-image.
Ainsi vous pouvez superposer dans une boite : une couleur de fond, une image (ou plusieurs) et du texte.

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

Utilisation de la méga propriété background

Une boite contenant 5 images positionnées. Les images sont insérées avec leur taille native.

Le code correspondant

Pour la boite identifiée jolies le raccourci 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. Ici un fond de couleur "purple".

Le rendu sur un petit écran est moche car les images n'ont pas été redimensionnée.

Redimensionner les images insérées

Ci-dessous une boite avec trois images insérées et redimensionnées.

Le code correspondant

Dans le cadre du CSS j'utilise une autre syntaxe. Au lieu du raccourci background j'utilise les différentes propriétés préfixées "background-" : background-image, background-position, background-repeat, background-size, background-color. CSS : div#cartes {width : 100% ; height : 500px ; border : 1px solid red; background-image : url(../images/as_pique.jpg) , url(../images/as_coeur.jpg), url(../images/as_trefle.jpg); background-position : 0% 0px, center center, 100% 400px ; background-repeat : no-repeat, no-repeat, no-repeat; background-size : 15%, 100px, 15% ; background-color : pink ;} HTML : <div id ="cartes"> <h3 style ="color : purple" > Trois images insérées dans une boite à fond rose</h3></div>

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 dans la boite !
Remarquez les différentes façons d'exprimer le positionnement de chaque image : en pixels, avec des mots clés voire en pourcentages.
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". Dans ce cas l'image unique n'est pas répétée et s'adapte aux dimensions la boite parente. Que ce soit "cover" ou "contain" l'image de fond n'est pas déformée (respect des proportions).

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 ???
Ci-dessous l'image à insérer :

Avant la solution était de redimensionner l'image aux dimensions de la boite avec un logiciel tel paint.
Avec CSS 3 il suffit d'utiliser les propriétés background-size : cover /contain & background-repeat : no-repeat

Nous voulons 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 avec background-size : cover

Remarquez que l'image de fond est rognée à droite (le grand sapin n'apparait plus).

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>

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-size : contain

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

L'image de fond n'est pas rognée mais on observe une grande bande blanche en bas de la boite.
En effet les proportions de l'image insérée étant différentes de celles du DIV, celle-ci n'occupe pas tout le conteneur.
Donc ici la première solution est préférable.

Nouvelles propriétés

Le module "CSS backgrounds and borders module level 3" introduit de nouvelles propriétés préfixées "background-".

Background-origin

La propriété background-origin permet de préciser à partir de quel point se positionne l'image de fond.

Le code CSS & HTML de la page

Notez les trois valeurs que peut prendre la propriété background-origin :
• la valeur par défaut est "padding-box" (au début de la marge interne)
• "border-box" : au début de la bordure
• "content-box" : au début de la zone de contenu

Aperçu dans un Iframe

Observez bien la position du coin haut gauche de l'image !

Background-clip

Cette nouvelle propriété permet de préciser si la couleur de fond doit s'étendre ou pas sous la bordure, la marge interne.

Le code CSS & HTML

Notez les trois valeurs que peut prendre la propriété background-origin :
• la valeur par défaut est "border-box" (au début de la bordure)
• "padding-box" : au début de la marge interne
• "content-box" : au début de la zone de contenu

Aperçu dans un Iframe

Observez bien la position du coin haut gauche de la couleur de fond.