Les propriétés du fond
La couleur : background-color
Par défaut la couleur de fond d'un
élément est transparente. Elle peut
être modifiée avec par la
propriété backgroud-color.
En cas de superposition :
- pour un élement dans le flux avec des marges
négatives ou une position relative, c'est l'ordre
d'apparition des éléments dans le flux qui
détermine l'ordre de la superposition, le dernier apparu
étant au premier plan
- pour un élément en position absolue
se supperpose à tout élément dans le
flux, c'est la propriété z-index qui
détermine l'ordre de supperposition par rapport aux autres
éléments en position absolue
Image de fond : background-image
Pour afficher une image de fond on utilise la
propriété background-image
un
joli flocon
un joli flocon
L'image de fond se supperpose à la couleur de fond.
Il peut néamoins ête intéressant de
définir une couleur de fond :
- pour une image png ou gif avec de la transparence
- en cas d'incapacité du navigateur à
afficher l'image de fond
Répétition du motif de fond :
background-repeat
Lorsque la taille de l'image de fond est supérieure
aux dimensins de l'élément, l'image de fond
s'affiche par défaut à partir du coin gauche
supérieur de l'élément.
Lorsque la taille de l'image de fond est inférieure
aux dimensions de l'élément, l'image de fond
s'affiche à partir du coin supérieur gauche de
l'élément et se répète
horizontalement et verticalement.
On peut modifier ce comportement en permettant :
- de ne pas répéter le motif :
background-repeat:no-repeat
- de ne répéter le motif
qu'horizontalement : background-repeat:repeat-x
- de ne répéter le motif que
verticalement : background-repeat:repeat-y
no-repeat
repeat-x
repeat-y
Position du fond : background-position
La propriété backgroud-position permet
de positionner le fond verticalement et horizontalement :
Les valeurs de la position horizontale et verticale peuvent
être données en :
- px : en position fixe
- em : proportionné à la taille de la
police de l'élément
- % : pourcentage de la taille de
l'élément
- on peut utiliser les mots clé : left center et
right pour la position horizontale et top center bottom pour la
position verticale
Toute combinaison peut être utilisée :
background-position: 20% 50px;
background-position : left top;
background-position : right 5em;
Lorsqu'une seule valeur est précisée
la seconde valeur la seconde valeur est fixée
à "center"
Ainsi :
- background-position:20px; <==> background-position:20px center;
- background-position:left; <==> background-position:left center;
Les propriétés de fond ne sont pas héritées
