La propriété background en CSS

Notez que cet article a été écrit pour la première fois il y a plus de 3 ans, mais n'est pas nécessairement obsolète.

La propriété background en CSS est un raccourci des propriétés de background suivantes et dans cet ordre:

  • background-color,
  • background-image,
  • background-repeat,
  • background-attachment,
  • background-position.

On aura donc:

Peu importe si l’une des valeurs de propriété est manquante , l’ordre des propriétés présentes doit être respecté.

background-color: color | transparent | initial | inherit
background-image: url | none | initial | inherit
background-repeat: repeat | repeat-x  | repeat-y | no-repeat | initial | inherit
background-attachment: scroll | fixed | local | initial | inherit
background-position: value

color est une couleur du type rgb ou rgba, url est l’adresse de l’image donnée entre parenthèses. Si vous voulez un gradient, il faudra le placer dans cette propriété:

repeat répète le background en x et y, repeat-x seulement en x, …

attachment : scroll indique au background de défiler avec l’élément. Si le background est appliqué au body, celui-ci suivra le défilement de la page. fixed: le background ne défile pas, local: le background défile avec le contenu de l’élément.

position indique la position du background. value est composé de 2 valeurs: left, right, center pour la première (en x) ; top, bottom, center pour la seconde (en y). Si l’on ne spécifie qu’une seule valeur, l’autre sera définie à center.

La valeur initial est la valeur par défaut, inherit permet d’hériter de la valeur définie par un parent.

La propriété background-size n’est pas définie dans ce raccourci.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *