CSS - L'arrière-plan
Tous les éléments (X)HTML peuvent avoir une couleur ou une image de fond.
Couleur de fond
Pour définir une couleur de fond on utilise la propriété :
- background-color, avec en valeur le code d'une couleur (hexadecimal, rgb() ou mot-clé)
Exemple :
background-color:#0099CC;
Image de fond
Pour utiliser une image de fond on utilise les propriétés :
- background-image:url(url_du_fichier), (N.B.: pas de guillemets). Par défaut l'image est utilisée comme "papier peint", c'est-à-dire qu'elle prend toute la place possible en étant répétée en damier.
- background-repeat, propriété optionnelle, pour caractériser la répétition de l'image.
Valeurs possibles :- repeat, par défaut
- no-repeat, l'image n'apparaît qu'une fois
- repeat-x, répétion horizontale de l'image
- repeat-y, répétion verticale de l'image
- background-position, propriété optionnelle, pour définir une position comportant 1 ou 2 valeurs. Utilisée de paire avec la propriété background-repeat ayant une valeur autre que repeat.
Valeurs possibles :- left
- center
- right
- top
- bottom
- dimension, en %, px, em...
Exemples, avec l'image 
, canard.png :
background-image:url(img/canard.png);
background-image:url(img/canard.png);
background-repeat:repeat-x;
background-image:url(img/canard.png);
background-repeat:no-repeat;
background-position:center top;
background-image:url(img/canard.png);
background-repeat:repeat-y;
background-position:left top;
Syntaxe raccourcie
Il est possible de déterminer toutes les propriétés d'arrière-plan par la propriété background.
p{
background-color:#CCCCCC;
background-image:url(img/canard.png);
background-repeat:no-repeat;
background-position:right center;
}
peut être ainsi contracté en :
p{
background:#CCCCCC url(img/canard.png) no-repeat right center;
}
background:#CCCCCC url(img/canard.png) no-repeat right center;