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 initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
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 :
|
Média | visuel |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Animable | pour chaque propriété individuelle de la propriété raccourcie :
|
Ordre canonique | l'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");
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>où
<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'>où
<bg-image> = none | <image>
<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-boxoù
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
où
<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()>où
<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> )où
<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> = <ident>
<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}où
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<color-stop> = <color> [ <percentage> | <length> ]?
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é | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support simple | 1.0 (1.7 ou moins) | 1.0 | 4.0 | 3.5 | 1.0 |
Gestion de plusieurs arrière-plans | 3.6 (1.9.2) | 1.0 | 9.0 | 10.5 | 1.3 |
Gestion des images SVG comme arrière-plan | 4.0 (2.0) | 31.0 | 9.0 | 21.0 | 5.1 |
Prise en charge de background-size |
18.0 (18.0) | 21.0 | 9.0 | 21.0 | 6.1 |
Prise en charge de background-origin et background-clip |
22.0 (22.0) | 31.0 | 9.0 | 21.0 | 5.1 |
Fonctionnalité | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple | 1.0 (1.9.2) | 2.1 | 10.0 | 5.0 | 3.2 |
Gestion de plusieurs arrière-plans | 1.0 (1.9.2) | 2.1 | 10.0 | 5.0 | 3.2 |
Gestion des images SVG comme arrière-plan | 4.0 (2.0) | 3.0 | 10.0 | ? | 4.2 |
Prise en charge de background-size |
18.0 (18.0) | 3.0 | 10.0 | (Oui) | 4.0 |
Prise en charge de background-origin et background-clip |
22.0 (22.0) | 3.0 | 10.0 | Pas de support | 4.0 |