Background-image - Propriété CSS

Schéma de la syntaxe de background-image.

• image est une image, définie par l'une des fonctions CSS suivantes : url() ou src(), image(), image-set(), cross-fade(), stripes(), element().
• gradient est un dégradé de couleurs, défini par l'une des fonctions de dégradé : conic-gradient(), linear-gradient(), radial-gradient(), repeating-conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient().

Description de la propriété background-image.

background-image définit l'image ou les images à afficher en arrière-plan de l'élément. Si plusieurs images sont indiquées, la première est celle qui est au dessus.

Si une couleur d'arrière-plan est également définie avec la propriété background-color, elle se trouvera en arrière de l'image. La couleur d'arrière-plan est donc masquée par l'image, sauf dans les parties transparentes de celle-ci ou autour de celle-ci. Il est conseillé de toujours définir une couleur en plus de l'image d'arrière-plan. En effet si cette dernière n'est pas trouvée ou n'est pas lisible, l'arrière-plan sera au moins matérialisé par la couleur.

background-image permet aussi de définir un dégradé de couleur à afficher en arrière-plan d'un élément.

Reportez-vous à la page background pour une présentation générale des arrière-plans.

Valeurs pour background-image.

• background-image: none;

  Valeur par défaut : pas d'image d'arrière-plan.

  
  Aucune image d'arrière-plan n'est définie.
• background-image: url('chemin/fichier.png'); background-image: src('chemin/fichier.png'); ⚠

  Désignation d'une image pour l'arrière-plan. Si l'url est donnée en relatif, ce sera par rapport à la feuille de styles.
  Reportez-vous à la page url() pour plus de détails sur la fonction.

  La fonction src() nécessitent que l'adresse de l'image soit inscrite entre guillemets ou entre apostrophes. Il est alors possible d'utiliser d'autres fonctions en paramètre. La fonction src() n'est pas encore reconnue par les navigateurs.

  
  Arrière-plan composé d'une image (ici un petit cercle) répétée sur toute la surface de l'élément.
• background-image: linear-gradient(0, blue, black);

  Définition d'un dégradé de couleurs pour l'arrière-plan. Le dégradé peut être linéaire, radial ou conique. Reportez-vous aux fonctions correspondantes : linear-gradient(), radial-gradient() et conic-gradient(). Ou, pour les dégradés répétés : repeating-linear-gradient(), repeating-radial-gradient() et repeating-conic-gradient().

  
  Arrière-plan composé d'un dégradé linéaire de couleur.

  
  Arrière-plan composé d'un dégradé linéaire répété.
• background-image: url('fichier1.png'), url('fichier2.png'), ...;

  Une succession d'images ou de dégradés, séparés par des virgules, peut être définie pour créer plusieurs arrière-plans qui vont se superposer, le premier arrière-plan cité se trouvant au dessus.

  Pour plus d'informations sur les arrière-plans multiples, reportez-vous à la page background multiples.

  Arrière-plan composé d'un dégradé qui va du bleu à transparent, et d'une image. Le dégradé est cité en premier, il est donc au dessus. L'image n'est visible que dans sa partie transparente.

  Arrière-plan composé d'une image et de même dégradé qui va du bleu à transparent. L'image est citée en premier, elle est au dessus du dégradé.

  Remarque : les exemples ci-dessus ne mélangent pas les différentes images ou dégradés utilisés pour l'arrière-plan : le premier arrière-plan cité masque les suivants, sauf dans ses parties transparentes. Mais il est possible de mélanger les différentes arrière-plans. Reportez vous à la propriété background-blend-mode pour plus de détails sur le mélange des arrière-plans.

• background-image: image(rtl 'fichier'); ⚠ background-image: image-set('fichier1' r1, 'fichier2' r2,...); ⚠

  Toutes ces syntaxes sont pour le moment expérimentales. Peu de navigateurs les traitent, ou alors avec le préfixe spécifique à chaque navigateur.

  La fonction image() est équivalente à la fonction url() mais avec des possibilités supplémentaires comme par exemple de pouvoir spécifier le sens de lecture de l'image (ltr ou rtl).

  La fonction image-set() accepte plusieurs images afin de donner le choix au navigateur, en fonction de la résolution ou du format de l'image.

  
  Arrière-plan utilisant la fonction image().

  
  Arrière-plan utilisant la fonction image-set().
• background-image: element(#id); ⚠

  La fonction element() est pour le moment expérimentales. Seul Firefox   la traite (2025), et encore avec le préfixe -moz-.

  Avec la fonction element() il est possible de récupérer l'image de l'élément dont l'id est spécifié;

  
  Image utilisée par element()

  
  La fonction element() récupère l'image de l'élément dont l'id est spécifié.
• background-image: initial; (none) background-image: inherit; background-image: revert; background-image: revertLayer; background-image: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de background-image.

La propriété background-image peut être animée mais de façon discontinue (passage brutale d'une valeur à l'autre). Cependant certains navigateur basés sur le moteur webkit anime le passage d'une image à l'autre, surtout lorsqu'elles n'ont pas la même taille.

Accéder à la propriété background-image par programme.

Définir une image d'arrière-plan en Javascript.

Javascript accepte une syntaxe avec la notation kebab-case typique de CSS (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case plus courante en Javascript (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['background-image'] = "url('img/background-image-2.png')"; // ou let el = document.getElementById('id'); el.style.backgroundImage = "url('img/background-image-2.png')";

Lire en Javascript la valeur de background-image.

Le code ci-après récupère la valeur de la propriété si elle a été affectée directement à l'élément lui-même via son attribut style et non pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['background-image']; // ou let el = document.getElementById('id'); let value = el.style.backgroundImage;

Lire la valeur calculée de background-image en Javascript.

La valeur calculée est celle qui résulte de la cascade des héritages, ou, s'il n'y a ni valeur affectée ni valeur héritée, la valeur calculée sera la valeur initiale de la propriété (none dans le cas de background-image).

Remarque : si l'image d'arrière-plan a été définie avec l'URL d'une image, la valeur renvoyée sera l'adresse absolue de cette image.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('background-image');

Modifier la valeur de la propriété background-image avec JQuery.


$('#id').css('background-image', "url('img/background-image-2.png')");
// ou
$('#id').css('backgroundImage', "url('img/background-image-2.png')");


Lire la valeur calculée de la propriété background-image avec JQuery.

La lecture de la valeur de background-image peut se faire avec le code suivant.

let value = $('#id').css('background-image');

Autres codes.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous affichent la valeur saisie à la propriété background-image pour le premier bouton, et la valeur calculée pour le deuxième. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de background-image. On constate en particulier que ce ne sont que des urls absolues qui sont mémorisées.

Compatibilité entre navigateurs.

Aucun problème de compatibilité : tous les navigateurs prennent correctement en charge la propriété background-image, sauf pour les images SVG que Safari   traite incomplètement, et pour la fonction element().

Remarques :

(1) Firefox prend en compte la préférence utilisateur browser.display.use_document_colors dans about:config.

(2) Le support de SVG dans les images d'arrière-plan est incomplet.

(3) Avec le préfixe du navigateur -moz-.

1

Propriété
background-image

2

Dégradé

3

SVG

4

Fonction
element()

Estimation de la prise en charge globale.

96%

96%

96%

3%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

2

Safari sur IOS

2

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

1

3

Samsung Internet

Firefox

1

3

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Histoire de la propriété background-image.

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Concernant background-image. Première définition de background-image dans la spécification du langage CSS niveau 1.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Concernant background-image. La propriété background-image accepte également la valeur inherit.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Arrière-plans et bordures - Niveau 3

  Concernant background-image. Possibilité d'utiliser un dégradé à la place d'une image.
  

  02 Août 2002

  Document de travail.

  

  17 Décembre 2009

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des arrière-plans.

La spécification du W3C "Module CSS - Arrière-plans et bordures" regroupe tout ce qui concerne les bordures et les arrière-plans.

Propriétés :