background-image

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

Exemple interactif

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ées 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é), 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

css
/* 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");

background-image:
  linear-gradient(to bottom, rgba(255, 255, 0, 0.5), rgba(0, 0, 255, 0.5)),
  url("cat-front.png");

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

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

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.

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 utilisatrices et 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.

Définition formelle

Valeur initialenone
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Valeur calculéecomme spécifié mais avec les valeurs <url> rendues absolues
Type d'animationdiscrète

Syntaxe formelle

background-image = 
<bg-image>#

<bg-image> =
<image> |
none

<image> =
<url> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

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

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

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

div {
  background-image: url("mdn_logo_only_color.png");
}

.catsandstars {
  background-image: url("star-transparent.gif"), url("cat-front.png");
  background-color: transparent;
}

Résultat

must be provided

Spécifications

Specification
CSS Backgrounds and Borders Module Level 3
# background-image

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-image
element()
Experimental
Gradients
image-rect()
DeprecatedNon-standard
image-set()
Multiple backgrounds
none
SVG images

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi