CSS : le raccourci "background" enrichi dans la version 3
Méga propriété background : révisions
Exemple
La version 3 de CSS est très riche en nouveautés.
Blabla ...
Blabla ...
Blabla ...
Blabla ...
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
#cartes
{
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 ;
}
...
<div id ="cartes"> </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 !
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.