MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

background-image: none;
background-image: url("http://www.exemple.xyz/bck.png");

background-image: inherit;

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.

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

Syntaxe

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.

Syntaxe formelle

<bg-image>#


<bg-image> = none | <image>


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


<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()>


<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> )


<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<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}
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?
<length-percentage> = <length> | <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

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

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1121.0143.51.0
Multiple backgrounds1.0123.69.0(Oui)1.3
Gradients1.02123.63101144.02
SVG images8.0124.09.09.55.05
element()NonNon(Oui)6NonNonNon
image-rect()NonNon(Oui) -moz- 7NonNonNon
Any <image> value(Oui)?Non???
FonctionnalitéAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple(Oui)(Oui)(Oui)(Oui)(Oui)(Oui)(Oui)
Multiple backgrounds(Oui)(Oui)(Oui)(Oui)(Oui)(Oui)(Oui)
Gradients(Oui)(Oui)2(Oui)(Oui)3(Oui)(Oui)4(Oui)2
SVG imagesNon(Oui)(Oui)(Oui)(Oui)(Oui)5.05
element()NonNonNon(Oui)6NonNonNon
image-rect()NonNonNon(Oui) -moz- 7NonNonNon
Any <image> value(Oui)(Oui)?Non???

1. If the browser.display.use_document_colors user preference in about:config is set to false, background images will not be displayed.

2. Some versions support only experimental gradients prefixed with -webkit.

3. Some versions support only experimental gradients prefixed with -moz.

4. Some versions support only experimental gradients prefixed with -o.

5. Support of SVG in CSS background is incomplete.

6. element() is supported only in its -moz-element() prefixed version

7. image-rect() is supported only in its -moz-image-rect() prefixed version.

Voir aussi

Étiquettes et contributeurs liés au document

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