css background

Utiliser background en css

Comment mettre une image ou une couleur de fond en css

css background

Date de publication : 2011-10-16 15:34:25

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 :

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

 
 

b1n@sp1n