background

La propriété CSS background est une propriété raccourcie qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément (couleur, image, origine, taille, répétition, etc.).

Exemple interactif

Propriétés détaillées correspondantes

Cette propriété permet de définir une ou plusieurs valeurs pour :

Lorsqu'on utilise la propriété raccourcie background, les valeurs fournies sont appliquées et pour les valeurs absentes, la propriété réinitialisera les propriétés détaillées avec leurs valeurs initiales.

Note : La propriété background-color ne peut être définie que sur le dernier arrière-plan, car il n'y a qu'une seule couleur d'arrière-plan pour un élément.

Syntaxe

/* On utilise une couleur <background-color> */
background: green;

/* Ici, une <bg-image> avec <repeat-style> */
background: url("test.jpg") repeat-y;

/* Là <box> et <background-color> */
background: border-box red;

/* Ici on utilise une seule image, centrée */
/* et remise à l'échelle */
background: no-repeat center/80% url("../img/image.png");

/* Valeurs globales */
background: inherit;
background: initial;
background: revert;
background: unset;

La propriété background permet de définir une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chacune des couches peut être définie avec :

Zéro ou une occurrence d'une valeur :
- <attachment>
- <bg-image>
- <position>
- <bg-size>
- <repeat-style>
Une valeur <bg-size> qui peut uniquement être utilisée directement après une valeur <position> suivie d'une barre oblique (par exemple center/80%)
Une valeur <box> présente zéro, une voire deux fois. Si elle n'est présente qu'une fois, cette valeur sera utilisée pour définir background-origin et background-clip. Si elle est présente à deux reprises, la première occurrence sera utilisée pour définir background-origin et la seconde définira background-clip.
Une valeur <background-color> qui peut uniquement être incluse pour la dernière couche qui est définie.

Valeurs

<attachment>: Voir background-attachment
<box>: Voir background-clip et background-origin
<background-color>: Voir background-color
<bg-image>: Voir background-image
<position>: Voir background-position
<repeat-style>: Voir background-repeat
<bg-size>: Voir background-size.

Accessibilité

Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisatrices et utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `background-image`: `none` `background-position`: `0% 0%` `background-size`: `auto auto` `background-repeat`: `repeat` `background-origin`: `padding-box` `background-clip`: `border-box` `background-attachment`: `scroll` `background-color`: `transparent`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	non
Pourcentages	pour chaque propriété individuelle de la propriété raccourcie : `background-position`: se rapporte à la taille de la zone de positionnement de l'arrière-plan, moins la taille de l'image; la taille se rapporte à la largeur pour les décalages horizontaux et à la hauteur pour les décalages verticaux `background-size`: relatifs à la zone de positionnement du fond
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `background-image`: comme spécifié mais avec les valeurs `url` rendues absolues `background-position`: pour chaque propriété individuelle de la propriété raccourcie : `background-position-x`: Une liste dont chaque élément se compose d'un décalage (exprimé comme la combinaison d'une longueur absolue et d'un pourcentage) et d'un mot-clé pour l'origine `background-position-y`: Une liste dont chaque élément se compose d'un décalage (exprimé comme la combinaison d'une longueur absolue et d'un pourcentage) et d'un mot-clé pour l'origine `background-size`: comme spécifié, mais avec les longueurs relatives converties en longueurs absolues `background-repeat`: une liste dont chaque élément consiste en deux mots-clé, un par dimension `background-origin`: comme spécifié `background-clip`: comme spécifié `background-attachment`: comme spécifié `background-color`: couleur calculée
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `background-color`: une couleur `background-image`: discrète `background-clip`: discrète `background-position`: repeatable list of simple list of length, percentage, or calc `background-size`: repeatable list of simple list of length, percentage, or calc `background-repeat`: discrète `background-attachment`: discrète

Syntaxe formelle

background = 
  [ <bg-layer># , ]? <final-bg-layer>  

<bg-layer> = 
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <box>                           ||
  <box>                           

<final-bg-layer> = 
  <'background-color'>            ||
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <box>                           ||
  <box>                           

<bg-image> = 
  <image>  |
  none     

<bg-position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<repeat-style> = 
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}  

<attachment> = 
  scroll  |
  fixed   |
  local   

<box> = 
  border-box   |
  padding-box  |
  content-box  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<length-percentage> = 
  <length>      |
  <percentage>  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<gradient> = 
  <linear-gradient()>            |
  <repeating-linear-gradient()>  |
  <radial-gradient()>            |
  <repeating-radial-gradient()>  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         |
  <device-cmyk()>        

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]  

<cf-image> = 
  <percentage>?          &&
  [ <image> | <color> ]  

<id-selector> = 
  <hash-token>  

<linear-gradient()> = 
  linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )  

<radial-gradient()> = 
  radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )  

<absolute-color-base> = 
  <hex-color> (en-US)    |
  <named-color>  |
  transparent    |
  <rgb()>        |
  <rgba()>       |
  <hsl()>        |
  <hsla()>       |
  <hwb()>        |
  <lab()>        |
  <lch()>        |
  <oklab()>      |
  <oklch()>      |
  <color()>      

<device-cmyk()> = 
  device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )  

<side-or-corner> = 
  [ left | right ]  ||
  [ top | bottom ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#  

<position> = 
  [ left | center | right | top | bottom | start | end | <length-percentage> ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ]  |
  [ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <length-percentage>? ]  

<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )  

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )  

<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<cmyk-component> = 
  <number>      |
  <percentage>  

<alpha-value> = 
  <number>      |
  <percentage>  

<linear-color-stop> = 
  <color>               &&
  <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>  

<hue> = 
  <number>  |
  <angle>   |
  none      

<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>             

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | none ]{3}  

<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65

Exemples

HTML

<p class="banniere">
  Dessine-moi une étoile<br/>
  Qui brille<br/>
  Dans le ciel.
</p>
<p class="attention">Voici un paragraphe !<p>

CSS

.attention {
  background: pink;
}

.banniere {
  background: url("starsolid.gif") #99f repeat-y fixed;
}

Résultat

Spécifications

Specification
CSS Backgrounds and Borders Module Level 4 # the-background

Compatibilité des navigateurs

BCD tables only load in the browser