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

Pour fixer l'image, il faut utiliser la propriété 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;
  1. top : en haut
  2. bottom : en bas
  3. left : à gauche
  4. right : à droite
  5. center : centré
Les directions se lisent comme indiqué dans l'article sur les marges.
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).
Twitter Facebook Google Plus Email

Posté le 19-07-2009

Articles susceptibles de vous intéresser