CSS : Propriété background - Couleurs et image de fond
Grâce aux CSS, vous avez la possibilité d'utiliser une couleur ou une image en fond d'un élément. Cet élément peut être le body, ou bien une div, un span, etc… La propriété CSS à utiliser est : background
Couleur de fond : background-color
Pour utiliser une couleur, il faut indiquer la couleur avec la propriété background-color.
Exemple(s)
background-color :#ff0000 ;
La couleur peut être en hexa, en rgb ou en texte.
A noter : la valeur transparent peut être utilisé pour indiquer un fond transparent.
Image de fond : background-image
Pour utiliser une image en fond d'un élément, il faut indiquer le chemin de l'image à partir du fichier CSS avec la propriété background-image.
Exemple(s)
background-image : url(./imgs/background.png); /* à partir du répertoire contenant le fichier CSS */ background-image : url(/imgs/background.png); /* à partir de la racine du site */
Fixer l'image de fond : background-attachement
Exemple(s)
background-attachment:fixed; /* valeur par défaut : scroll*/
Répétition de l'image : background-repeat
Il est possible de répéter une image en utilisant la propriété background-repeat.Exemple(s)
background-repeat:no-repeat; background-repeat:repeat; /* Repete l'image sur l'axe horizontale et verticale */ background-repeat:repeat-x; /* Repete l'image sur l'axe horizontale */ background-repeat:repeat-y; /* Repete l'image sur l'axe verticale */
Positionnement de l'image : background-position
Le fond de l'élément (l'image) peut être positionné par rapport au coin supérieur gauche de l'élément.Exemple(s)
background-position:20% 50%;Les valeurs peuvent aussi être des mots-clés:
background-position:center center;
- top : en haut
- bottom : en bas
- left : à gauche
- right : à droite
- center : centré
Pour rappel, dans les deux exemples, il y a 2 valeurs. Cela signifie donc que la première valeur regroupe les directions "haut" et "bas" (top et bottom) et la deuxième "gauche" et "droite" (left et right).
Posté le 19-07-2009