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 |
