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(rgb(0 0 255 / 0.5), rgb(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%;
}

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;

Chaque image d'arrière-plan est définie soit par le mot-clé none, soit par une valeur <image>.

Pour définir plusieurs images d'arrière-plan, indiquez plusieurs valeurs, séparées par une virgule.

Valeurs

none

Un mot-clé qui indique qu'aucune image ne doit être utilisée comme arrière-plan.

<image>

Une valeur qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules.

Description

Les images d'arrière-plan sont dessinées sur des couches de contexte d'empilement les unes au-dessus des autres. La première couche indiquée est dessinée comme si elle était la plus proche de l'utilisateur·ice.

Les bordures de l'élément sont ensuite dessinées au-dessus, et la background-color est dessinée en dessous. La façon dont les images sont dessinées par rapport à la boîte et à ses bordures est définie par les propriétés CSS background-clip et background-origin.

Si une image indiquée ne peut pas être affichée (par exemple, si le fichier désigné par l'URI ne peut pas être chargé), les navigateurs la traitent comme une valeur none.

Accessibilité

Les navigateurs ne fournissent aucune information particulière sur les images d'arrière-plan aux technologies d'assistance. Cela concerne principalement les lecteurs d'écran, car un lecteur d'écran n'annoncera pas leur présence et ne transmettra donc rien à l'utilisateur·ice. Si l'image contient des informations essentielles à la compréhension générale de la page, il vaut mieux décrire ces informations de façon sémantique dans le document.

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

Il est également important de vérifier que le contraste entre l'image d'arrière-plan et le texte au premier plan est suffisamment élevé pour que les personnes en situation de basse vision puissent lire le contenu de la page.

Le ratio de contraste des couleurs est déterminé en comparant la luminance des valeurs de couleur du texte et de l'arrière-plan. Pour respecter les Règles pour l'accessibilité des contenus Web (WCAG) ^(angl.), un ratio de 4.5:1 est requis pour le texte courant et 3:1 pour les textes plus grands comme les titres. Un texte est considéré comme grand s'il mesure au moins 24px ou s'il est en gras et mesure au moins 18.66px.

• Vérificateur de contraste WebAIM ^(angl.)
• Comprendre la règle WCAG 1.4
• Comprendre le critère de succès 1.4.3 | Understanding WCAG 2.0 ^(angl.), W3C (2023)

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

Notez que l'image de l'étoile est partiellement transparente et superposée à 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-weight: bold;
  font-size: 1.5em;
  color: white;
  text-shadow: 0.07em 0.07em 0.05em black;
  background-image: none;
  background-color: transparent;
}

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

.cats-and-stars {
  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 (raccourcie)

• 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