background-image

Résumé

La propriété CSS background-image définit les images d'arrière-plan d'un élément. Les images sont dessinées successivement commes des calques empilés, avec la première image définie sur le dessus, comme si elle était la plus proche de l'utilisateur. Les bordures de l'élément sont dessinés au dessus des images, et la couleur de fond est dessinée en-dessous.

Comment l'image est dessinée en relation avec son conteneur et ses bordures est défini par les propriétés background-clip et background-origin.

Si l'image indiquée ne peut pas être dessinée (par exemple parce que le fichier à l'adresse URI indiquée ne peut pas être chargé) les navigateurs la traiteront comme s'il s'agissait de la valeur none.

Note : Les Web Développeurs doivent toujours s'assurer de spécifier une background-color, même si l'image est opaque et que la couleur ne devrait pas s'afficher dans des circonstances normales ; si l'image ne peut pas être chargée, par exemple quand la connexion est coupée, la couleur de fond sera utilisé en recours.

Syntaxe

background-image: image-de-fond[, image-de-fond]*

où :

image-de-fond
est une <image> ou le mot-clef none : indique l'image à afficher ou l'absence d'image. Il peut y avoir plusieurs images si les fonds multiples sont supportés.

Exemples

Voir l'exemple sur une page

body { background-image: url("images/darkpattern.png"); }

div { background-image: url("images/foo.png"), url("images/bar.png"); }

p { background-image: none; }

Spécifications

Spécification Statut Commentaire
CSS Backgrounds and Borders Module Level 3 Candidate Recommendation La propriété a été étendue pour supporter les fonds multiples et toute donnée CSS du type <image>.
CSS 2.1 Recommendation La façon dont les images avec ou sans dimensions intrinsèques sont gérées, est maintenant décris.
CSS 1 (traduction française) Recommendation  

Compatibilité des navigateurs

Fonction Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support de base 1.0 (1.7 ou moins) 1.0 4.0 3.5 1.0
Fonds mutliples 3.6 (1.9.2) 1.0 9.0 yes 1.3
Dégradés 3.6 (1.9.2)-moz 1.0-webkit 10-ms 11+-o 4.0-webkit
Images SVG 4.0 (2.0) 8.0 9.0 9.5 5.0 [1]
element() (Oui)-moz ? Pas de support Pas de support Pas de support
image-rect() (Oui)-moz Pas de support Pas de support Pas de support Pas de support
Toute valeur <image> Pas de support ? ? ? ?
Fonction iOS Safari Opera Mini Opera Mobile Android Browser
Support de base (Oui) (Oui) (Oui) (Oui)
Fonds multiples (Oui) (Oui) (Oui) (Oui)
Dégradés

(Oui)-webkit

ancienne syntaxe webkit pour iOS 5.0 et plus ancien

? ?

(Oui)-webkit

ancienne syntaxe webkit

Images SVG (Oui) [1] (Oui) (Oui) Pas de support
element() (Oui) ? ? ?
image-rect() (Oui) Pas de support Pas de support Pas de support
Toute valeur <image> Pas de support ? ? ?

Notes

[1] Le support de SVG dans les arrières-plans CSS est incomplet dans la version actuelle de Safari iOS (5.0). Même chose pour Safari avant 5.0.

Voir également

Étiquettes et contributeurs liés au document

Contributeurs à cette page : teoli, FredB, tregagnon, Mgjbot, Fredchat, Kyodev
Dernière mise à jour par : teoli,
Masquer la barre latérale