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. 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.

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 :
  • background-image: comme spécifié mais avec une URI relative convertie en une URI absolue
  • background-position: une liste dont chaque élément consiste en deux mots-clé représentant l'origine et deux offsets depuis cette origine, chacun étant une longueur absolue (si spécifié comme une length), ou un pourcentage
  • 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: si la valeur est translucide, la valeur calculée est la fonction rgba()correspondante. Sinon, la fonction rgb()correspondante. Le mot-clé transparent devient rgb(0,0,0).
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

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

Valeurs

Une ou plusieurs valeurs suivantes, dans n'importe quel ordre :

<attachment>
Voir background-attachment
<box>
Voir background-clip
<background-color>
Voir background-color
<bg-image>
Voir background-image
<position>
Voir background-position
<repeat-style>
Voir background-repeat
<bg-size>
Voir background-size. Cette propriété doit être définie après <position>, séparée de cette dernière par une barre oblique '/'.

Syntaxe formelle

[ <bg-layer> , ]* <final-bg-layer>


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


<bg-image> = none | <image>
<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>
<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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = transparent | aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<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}


<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<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: red; 
}

.banniere { 
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed; 
}

Résultat

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.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox Internet Explorer Opera Safari Servo
Support simple1.0121.043.51.0?
Multiple backgrounds1.0123.6910.51.3?
SVG image as background31.0129.09.021.05.1?
background-size21.0129.09.021.05.1?
background-origin21.01222.09.021.05.1?
background-clip21.01222.09.021.05.1?
Fonctionnalité Android Chrome for Android Edge Mobile Firefox for Android IE Mobile Opera Mobile Safari Mobile
Support simple2.1?(Oui)1.010.05.03.2
Multiple backgrounds2.1?(Oui)1.010.0?3.2
SVG image as background3.0?(Oui)4.010.0(Oui)4.2
background-size3.0?(Oui)18.010.0(Oui)4.0
background-origin3.0?(Oui)22.010.0Aucun support4.0
background-clip3.0?(Oui)22.010.0Aucun support4.0

Voir aussi

Étiquettes et contributeurs liés au document

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