La propriété background permet de définir le fond d'un élément en css.
Cette propriété est utilisée pour mettre une image de fond ou définir une couleur de fond. Au même titre que la propriété css border, background permet de modifier directement les propriétés css suivantes :
- background-color : Définit une couleur de fond
- background-image : Définit une image de fond
- background-repeat : Définit le mode de répétition de l'image de fond
- background-attachment : Définit si l'image de fond scroll ou pas avec le contenu de la page
- background-position : Définit le positionnement de l'image
La propriété background
Pour modifier le background d'un élément html il est possible au choix de définir une par les propriétés ci dessus ou d'utiliser un raccourci en utilisant directement la propriété css background.
Voici un exemple :
<p style="background:red url('/image-de-fond.png') no-repeat fixed bottom right;">
Ce paragraphe à une couleur de fond rouge, l'image de fond "/image-de-fond.png" ne sera pas répétée horizontalement et verticalement, elle sera fixe par rapport au scroll et positionnée en bas à droite.
</p>
Lorsque vous utilisez le raccourci raccourci background pour spécifié le fond de l'élément l'ordre est le suivant :
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Il est possible de ne pas spécifier toutes les valeurs tant que les propriétés utilisées sont dans l'ordre indiqué.
L'exemple suivant est possible :
<p style="background:green url('/image-de-fond.png') left top;">
Le fond sera de couleur verte et l'image sera positionnée en haut à gauche.
</p>
Source : CSS: Background and Color
Image : Schtumple
