background-image

Exemple interactif

background-image: url("/shared-assets/images/examples/lizard.png");

background-image:
  url("/shared-assets/images/examples/lizard.png"),
  url("/shared-assets/images/examples/star.png");

background-image:
  url("/shared-assets/images/examples/star.png"),
  url("/shared-assets/images/examples/lizard.png");

background-image:
  linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
  url("/shared-assets/images/examples/lizard.png");

<section id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

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.

Syntaxe

/* Valeur simple */
background-image: linear-gradient(black, white);
background-image: url("cat-front.png");

/* Plusieurs valeurs */
background-image:
  radial-gradient(circle, transparent 45%, black 48%),
  radial-gradient(ellipse farthest-corner, #fc1c14 20%, #cf15cf 80%);

/* Valeurs globales */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
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.

• Comprendre les règles du WCAG 1.1
• Comprendre les critères de succès 1.1.1 — Comprendre les règles du WCAG 2.0 ^(angl.)

Définition formelle

Syntaxe formelle

background-image = 
  <bg-image>#  

<bg-image> = 
  <image>  |
  none     

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

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

Exemples

Superposition d'images d'arrière-plan

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("mdn_logo_only_color.png");
}

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

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• <img>

• Les fonctions CSS associées aux images :

  • linear-gradient()
  • radial-gradient()
  • conic-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • repeating-conic-gradient()
  • <url>

• Utiliser des dégradés CSS

• Implémenter des sprites en CSS

• Le module d'images CSS

• Les propriétés CSS relatives aux arrière-plans :

  • background-attachment
  • background-clip
  • background-color
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • background shorthand

• Apprendre : Bordures et arrière-plans

• Utiliser plusieurs arrière-plans

• Redimensionner les images d'arrière-plan

• Le module sur les arrière-plans et bordures CSS