{{ CSSRef() }}
Résumé
La propriété CSS background
est un raccourci pour définir les valeurs des propriétés d'arrière-plan dans une seule et unique règle CSS. La propriété background
peut être utilisée pour définir les valeurs d'une ou de plusieurs des propriétés suivantes : {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ Cssxref("background-size") }} et {{ Cssxref("background-attachment") }}.
La propriété raccourcie background
assignera les valeurs données explicitement et définira les autres propriétés à leurs valeurs par défaut.
- {{ Xref_cssinitial() }}
transparent || none || repeat || scroll || 0% 0%
- S'applique à tous les éléments
- {{ Xref_cssinherited() }} non
- Pourcentages permis pour {{ Cssxref("background-position") }}
- Média {{ Xref_cssvisual() }}
- {{ Xref_csscomputed() }} voir les propriétés individuelles
Syntaxe
background: [<bg-layer>, ]* <final-bg-layer>
Où :
- <bg-layer>
-
[ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ]
| {{ Cssxref("inherit") }} - <final-bg-layer>
-
[ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ]
| {{ Cssxref("inherit") }} || <background-color>
Valeurs
- <background-color>
- Voir {{ Cssxref("background-color") }}.
- <background-image>
- Voir {{ Cssxref("background-image") }}
- <background-repeat>
- Voir {{ Cssxref("background-repeat") }}.
- <background-attachment>
- Voir {{ Cssxref("background-attachment") }}.
- <background-position>
- Voir {{ Cssxref("background-position") }}.
Exemples
{{ CSSRefExampleLink("background") }}
body { background: red; } .topbanner { background: url("topbanner.png") #00D repeat fixed; }
Notes
La propriété background
commence par réinitialiser les propriétés d'arrière-plan individuelles à leur valeur initiale, puis leur assigne les valeurs explicitement définies dans la déclaration. Vous n'avez pas à définir une valeur pour chaque propriété individuelle, mais uniquement celles que vous désirez modifier par rapport à leur valeur initiale.
Spécifications
Spécification | Statut | Commentaire |
---|---|---|
CSS Backgrounds and Borders Module Level 3 | {{ Spec2('CSS3 Backgrounds') }} | La propriété raccourci a été étendue pour supporter les fonds multiples et les nouvelles propriétés {{ cssxref("background-size") }} et {{ cssxref("background-clip") }}. |
CSS 2.1 | {{ Spec2('CSS2.1') }} | Pas de changement significatif |
CSS 1 | {{ Spec2('CSS1') }} |
Compatibilité des navigateurs
{{ CompatibilityTable() }}
Fonction | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support de base | {{ CompatGeckoDesktop("1.0") }} | 1.0 | 4.0 | 3.5 | 1.0 |
Fonds multiples | {{ CompatGeckoDesktop("1.9.2") }} | 1.0 | 9.0 | 10.5 | 1.3 |
Image SVG comme arrière-plan | {{ CompatGeckoDesktop("2.0") }} | {{ CompatVersionUnknown() }} | 9.0 # | {{ CompatVersionUnknown() }} | {{ CompatVersionUnknown() }} |
Fonction | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support de base | {{ CompatGeckoMobile("1.9.2") }} | 2.1 | {{ CompatUnknown() }} | 10.0 | 3.2 |
Fonds multiples | {{ CompatGeckoMobile("1.9.2") }} | 2.1 | {{ CompatUnknown() }} | 10.0 | 3.2 |
Image SVG comme arrière-plan | {{ CompatGeckoMobile("2.0") }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} |
Voir également
- {{ CSS_Reference:Background() }}
- {{ cssxref("-moz-background-size") }}, {{ cssxref("-moz-background-origin") }}, {{ cssxref("-moz-background-clip") }}, {{ cssxref("-moz-background-inline-policy") }}
- Utilisation de dégradés
- Fonds multiples