La propriété background-image permet de définir une ou plusieurs images comme arrière(s)-plan(s) pour un élément.

Les images sont dessinées les unes au-dessus des autres. La première image indiquée est dessinée comme étant la plus proche de l'utilisateur.

Les bordures de l'élément sont dessinés par-dessus l'arrière-plan et la couleur background-color est dessinée sous l'arrière-plan. La position et les limites de chaque image sont gérées grâce aux propriétés background-clip et background-origin.

Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiquée), les navigateurs considèreront la valeur comme none.

Note : Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via background-color au cas où les images ne peuvent être chargées.

Syntaxe

/* Valeur simple */
background-image: url('https://example.com/bck.png');

/* Plusieurs valeurs */
background-image: url('https://example.com/top.png'), url('https://example.com/bottom.png');

/* Valeur avec un mot-clé */
background-image: none;

/* Valeurs globales */
background-image: inherit;
background-image: initial;
background-image: unset;

Chaque image d'arrière-plan peut être définie avec le mot-clé none ou avec une valeur de type <image>. Pour indiquer plusieurs images d'arrière-plan, on listera les différentes valeurs les unes à la suite des autres et séparées par des virgules :

background-image:
  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
  url("https://mdn.mozillademos.org/files/7693/catfront.png");

Valeurs

none
Un mot-clé qui indique qu'aucune image ne doit être utilisée comme arrière-plan.
<image>
Une valeur <image> qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules. Lorsque c'est une URL qui est utilisée, on peut aussi bien utiliser des simples quotes ('texte_avec_double_quotes_"_') ou des doubles quotes ("texte_avec_simple_quote_'_") pour encadrer le texte qui forme l'URL.

Syntaxe formelle

<bg-image>#


<bg-image> = none | <image>


<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>


<image()> = image( <image-tags>? [ <image-src>? , <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()> | <conic-gradient()>


<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<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> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )


<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>


<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>

Exemples

On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèrement transparente et se superpose par-dessus l'image du chat.

HTML

<div>
  <p class="catsandstars">
    Un paragraphe avec des chats<br/>
    et des étoiles.
  </p>
  <p>Pas ici.</p>
  <p class="catsandstars">
    Et voilà encore des chats.<br/>
    Et des étoiles !
  </p>
  <p>Puis plus rien.</p>
</div>

CSS

p {
  font-size: 1.5em;
  color: #FE7F88;
  background-color: transparent;
  background-image: none;
}

div {
  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

.catsandstars {
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), 
                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}

Résultat

Accessibilité

Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'background-image' dans cette spécification.
Candidat au statut de recommandation La propriété a été étendue pour gérer plusieurs arrières-plans et le type de donnée CSS <image>.
CSS Level 2 (Revision 2)
La définition de 'background-image' dans cette spécification.
Version de travail
CSS Level 2 (Revision 1)
La définition de 'background-image' dans cette spécification.
Recommendation La gestion des dimensions intrinsèques (lorsqu'elles sont absentes ou présentes) est décrite.
CSS Level 1
La définition de 'background-image' dans cette spécification.
Recommendation Définition initiale.
Valeur initialenone
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié mais avec les valeurs url rendues absolues
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
background-imageChrome Support complet 1Edge Support complet 12Firefox Support complet 1
Notes
Support complet 1
Notes
Notes If the browser.display.use_document_colors user preference in about:config is set to false, background images will not be displayed.
IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 4
Notes
Support complet 4
Notes
Notes If the browser.display.use_document_colors user preference in about:config is set to false, background images will not be displayed.
Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
Multiple backgroundsChrome Support complet 1Edge Support complet 12Firefox Support complet 3.6IE Support complet 9Opera Support complet OuiSafari Support complet 1.3WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
GradientsChrome Support complet 1
Notes
Support complet 1
Notes
Notes Some versions support only experimental gradients prefixed with -webkit.
Edge Support complet 12Firefox Support complet 3.6
Notes
Support complet 3.6
Notes
Notes Some versions support only experimental gradients prefixed with -moz.
IE Support complet 10Opera Support complet 11
Notes
Support complet 11
Notes
Notes Some versions support only experimental gradients prefixed with -o.
Safari Support complet 4
Notes
Support complet 4
Notes
Notes Some versions support only experimental gradients prefixed with -webkit.
WebView Android Support complet OuiChrome Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Some versions support only experimental gradients prefixed with -webkit.
Firefox Android Support complet 4
Notes
Support complet 4
Notes
Notes Some versions support only experimental gradients prefixed with -moz.
Opera Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Some versions support only experimental gradients prefixed with -o.
Safari iOS Support complet Oui
Notes
Support complet Oui
Notes
Notes Some versions support only experimental gradients prefixed with -webkit.
Samsung Internet Android Support complet Oui
SVG imagesChrome Support complet 8Edge Support complet 12Firefox Support complet 4IE Support complet 9Opera Support complet 9.5Safari Support complet 5
Notes
Support complet 5
Notes
Notes Support of SVG in CSS background is incomplete.
WebView Android Aucun support NonChrome Android Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 5
Notes
Support complet 5
Notes
Notes Support of SVG in CSS background is incomplete.
Samsung Internet Android Support complet Oui
element()
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 4
Préfixée
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 4
Préfixée
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
image-rect()
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 4
Préfixée
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 4
Préfixée
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
image-set()
Expérimentale
Chrome Support complet 21
Préfixée
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Aucun support NonFirefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1107646.
IE Aucun support NonOpera Support complet 15
Préfixée
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support partiel 6
Préfixée Notes
Support partiel 6
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Support for url images only and x is the only supported resolution unit. See bug 160934.
WebView Android Support complet 4.4
Préfixée
Support complet 4.4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1107646.
Opera Android Support complet 14
Préfixée
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support partiel 6
Préfixée Notes
Support partiel 6
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Support for url images only and x is the only supported resolution unit. See bug 160934.
Samsung Internet Android Support complet 4.0
Préfixée
Support complet 4.0
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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