La propriété 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.).

Elle permet de définir une ou plusieurs valeurs pour : background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, et background-attachment.

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");

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 :

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.

Syntaxe formelle

[ <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> = none | <image>
<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> | 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()> | <element()> | <cross-fade()> | <gradient>
<length-percentage> = <length> | <percentage>


<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>


<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )


<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?

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("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; 
}

Résultat

Accessibilité

Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. 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.

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'background' dans cette spécification.
Candidat au statut de recommandation La propriété raccourcie a été étendue pour gérer plusieurs arrière-plans et également gérer les propriétés background-size, background-origin et background-clip.
CSS Level 2 (Revision 1)
La définition de 'background' dans cette spécification.
Recommendation Pas de modification significative.
CSS Level 1
La définition de 'background' dans cette spécification.
Recommendation Définition initiale.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Pourcentagespour 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
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android Support complet 2Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 5Safari iOS Support complet 3.2Samsung Internet Android Support complet Oui
Multiple backgroundsChrome Support complet 1Edge Support complet 12Firefox Support complet 3.6IE Support complet 9Opera Support complet 10.5Safari Support complet 1.3WebView Android Support complet 2Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android ? Safari iOS Support complet 3.2Samsung Internet Android Support complet Oui
SVG image as backgroundChrome Support complet 31Edge Support complet 12Firefox Support complet 9IE Support complet 9Opera Support complet 21Safari Support complet 5.1WebView Android Support complet 3Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 4.2Samsung Internet Android ?
Values of background-size longhandChrome Support complet 21Edge Support complet 12Firefox Support complet 9IE Support complet 9Opera Support complet 21Safari Support complet 5.1WebView Android Support complet 3Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 18Opera Android Support complet OuiSafari iOS Support complet 4Samsung Internet Android Support complet Oui
Values of background-origin longhandChrome Support complet 21Edge Support complet 12Firefox Support complet 22IE Support complet 9Opera Support complet 21Safari Support complet 5.1WebView Android Support complet 3Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 22Opera Android Aucun support NonSafari iOS Support complet 4Samsung Internet Android ?
Values of background-clip longhandChrome Support complet 21Edge Support complet 12Firefox Support complet 22IE Support complet 9Opera Support complet 21Safari Support complet 5.1WebView Android Support complet 3Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 22Opera Android Aucun support NonSafari iOS Support complet 4Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : SphinxKnight,