background

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La propriété raccourcie CSS background définit l'ensemble des propriétés de style d'arrière-plan en une seule déclaration, comme la couleur, l'image, l'origine, la taille et le mode de répétition.

Exemple interactif

background: green;

background: content-box radial-gradient(crimson, skyblue);

background: no-repeat url("/shared-assets/images/examples/lizard.png");

background: left 5% / 15% 60% repeat-x
  url("/shared-assets/images/examples/star.png");

background:
  center / contain no-repeat
    url("/shared-assets/images/examples/firefox-logo.svg"),
  #eeeeee 35% url("/shared-assets/images/examples/lizard.png");

<section id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

Propriétés constitutives

Cette propriété est une propriété raccourcie qui regroupe les propriétés CSS suivantes :

Syntaxe

css

/* 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: revert-layer;
background: unset;

Valeurs

<attachment>: Voir background-attachment. Par défaut : scroll.
<visual-box>: Voir background-clip et background-origin. Par défaut : border-box et padding-box respectivement.
<'background-color'>: Voir background-color. Par défaut : transparent.
<bg-image>: Voir background-image. Par défaut : none.
<bg-position>: Voir background-position. Par défaut : 0% 0%.
<repeat-style>: Voir background-repeat. Par défaut : repeat.
<bg-size>: Voir background-size. Par défaut : auto.

Description

La propriété raccourcie background permet de déclarer toutes les propriétés d'arrière-plan CSS en une seule déclaration. L'arrière-plan se situe sous le contenu d'un élément. Lorsque plusieurs valeurs d'arrière-plan séparées par des virgules sont présentes, chacune constitue une couche peinte au‑dessus de la précédente.

La propriété background est composée d'une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chaque couche peut inclure zéro, un ou deux composants <visual-box> et zéro ou un des composants <attachment>, <bg-image>, <bg-position>, <bg-size> et <repeat-style>. Si deux composants <bg-position>, <bg-size> ou <repeat-style> sont définis, la première valeur correspond à la dimension horizontale et la seconde à la dimension verticale. Si une seule valeur est définie, elle s'applique aux deux dimensions.

Le composant <'background-color'> ne peut être inclus que dans la dernière couche d'arrière-plan définie.

Les propriétés de composant non définies dans la déclaration raccourcie background prennent leurs valeurs par défaut.

Ordre des propriétés de composant

Comme certaines propriétés constitutives partagent des types de valeurs, l'ordre de ces propriétés dans la propriété raccourcie est important.

La valeur <bg-size> ne peut être incluse qu'immédiatement après <bg-position>, séparée par le caractère /. Par exemple : 10px 10px / 80% 80% signifie que l'image d'arrière-plan mesure 80% de la hauteur et de la largeur de l'élément, et sera positionnée à 10px du haut et à 10px de la gauche du coin supérieur gauche de l'élément. Dans <bg-position>, si les deux valeurs sont des longueurs, ou si l'une est une longueur et l'autre center, la première valeur correspond à la position horizontale et la seconde à la position verticale.

Chaque couche d'arrière-plan peut inclure zéro, une ou deux valeurs <visual-box>. Si une seule valeur est incluse, elle définit à la fois background-origin et background-clip. Si deux valeurs sont présentes, la première occurrence définit background-origin et la seconde définit background-clip. Si aucune valeur <visual-box> n'est présente, background-origin prend la valeur par défaut border-box et background-clip prend la valeur par défaut padding-box.

Bien qu'il n'y ait pas d'exigence d'ordre pour les autres propriétés d'arrière-plan, l'ordre suivant est recommandé pour la cohérence et la lisibilité ; rappelez‑vous qu'aucune des valeurs n'est obligatoire :

<bg-image> <bg-position> / <bg-size> <repeat-style> <attachment> <bg-clip> <bg-origin> <'background-color'>

La déclaration background suivante définit explicitement toutes les valeurs par défaut dans cet ordre :

css

background: none 0% 0% / auto auto repeat scroll border-box padding-box
  transparent;

Les trois lignes CSS suivantes sont équivalentes à l'exemple ci‑dessus, même si l'ordre diffère :

css

background: none;
background: transparent;
background: repeat scroll 0% 0% / auto padding-box border-box none transparent;

Ordre de peinture des images

Si plusieurs arrière-plans séparés par des virgules sont inclus, ils créent plusieurs couches d'arrière-plan empilées les unes sur les autres. Le premier arrière-plan de la liste crée la couche supérieure. Si la couche supérieure ne contient aucune zone transparente, c'est la seule couche qui sera visible.

La dernière couche est la couche inférieure. La couleur d'arrière-plan est toujours incluse dans cette couche.

Application de l'arrière-plan du corps du document

Si la valeur calculée de background-image de l'élément HTML <html> :root est none et que son background-color est transparent, le navigateur transfère les styles background définis sur l'élément HTML <body> vers la racide (:root) et considère que le corps (<body>) est comme si background: initial avait été appliqué. Autrement dit, l'élément <html> reçoit tous les styles background définis sur le <body>, et les propriétés d'arrière-plan du <body> sont réglées sur leurs valeurs initiales.

En raison de ce comportement, les auteur·ice·s des spécifications recommandent de définir les styles d'arrière-plan de votre document dans le bloc de styles body plutôt que dans celui de html. Cependant, il est important de noter que l'utilisation du confinement désactive ce comportement. Lorsque la propriété contain est définie sur une valeur autre que none pour l'élément <html> ou <body>, la propriété background et ses composantes de forme longue ne se propagent pas de l'élément <body> vers le <html> racine.

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`: une liste répétable `background-position`: une liste répétable `background-size`: une liste répétable `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>                    ||
  <bg-clip>                       ||
  <visual-box>                    

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

<bg-image> = 
  <image>  |
  none     

<bg-position> = 
  <position>        |
  <position-three>  

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

<repeat-style> = 
  repeat-x           |
  repeat-y           |
  repeat-block       |
  repeat-inline      |
  <repetition>{1,2}  

<attachment> = 
  scroll  |
  fixed   |
  local   

<bg-clip> = 
  <visual-box>             |
  [ border-area || text ]  

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

<background-color> = 
  <color>  

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

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

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

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

<repetition> = 
  repeat     |
  space      |
  round      |
  no-repeat  

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

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

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

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

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<image-tags> = 
  ltr  |
  rtl  

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

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

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

<id-selector> = 
  <hash-token>

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 utilisateur·ice·s. 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.

Exemples

Définir des arrière-plans avec des mots-clés de couleur et des images

HTML

html

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

CSS

css

.attention {
  background: pink;
}

.banniere {
  background: url("star-solid.gif") #9999ff repeat-y fixed;
}

Résultat

Spécifications

Specification
CSS Backgrounds and Borders Module Level 3 # background

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 29 janv. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content