Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

background-image - Propriété CSS

background-image

Résumé des caractéristiques de la propriété background-image

Description rapide
Image d'arrière-plan.
Statut
Standard
Type de valeur
Image | Dégradé
Plusieurs images ou dégradés peuvent être définis dans le cas d'arrière-plans multiples.
Valeurs prédéfinies
none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété background-image passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Arrière-plans et bordures
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

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

Syntaxes pour background-image.

url est le chemin d'accès à un fichier image.
gradient est un dégradé de couleurs, défini par l'une des fonctions de dégradé.

background-image:
Schéma syntaxique de la propriété background-imageSyntaxe de background-image, propriété CSS pour insérer une image d'arrière-plan. none none url(urlurl(url) gradient gradient , ,
;
  • background-image: none;

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

  • background-image: url('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.

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

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

  • background-image: initial; background-image: inherit; background-image: revert; background-image: revert-layer; background-image: unset;

    La valeur initiale est : none.

Exemples.

Cliquez sur les exemples pour afficher leur code CSS.

Une image (ici un petit cercle) répétée sur tout l'arrière-plan de l'élément
Un dégradé de couleur, dans les nuances de bleu
Une image (le petit cercle) combinée avec un dégradé. L'image étant citée avant le dégradé, c'est elle qui se retrouve au dessus : le dégradé n'est visible que dans les parties transparentes de l'image.
Les mêmes arrière-plans que ci-dessus, mais cités dans l'autre sens : le dégradé est en premier. C'est l'image qui est en dessous, elle ne devient visible que lorsque le dégradé s'approche de la couleur transparente.
Combinaison de deux dégradés. Le premier dégradé cité doit inclure la couleur transparente, faute de quoi le deuxième dégradé ne serait pas visible du tout.
Un seul dégradé, mais faisant intervenir trois couleurs
Un dégradé répétitif

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.

Manipulation de la propriété background-image par programme.

Les codes donnés ci-après travaillent sur le cercle bleu ci-dessous (un élément avec des coins arrondis à 50%).

Modifier la valeur de background-image 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).


function setBackgroundImage(el) {
el.style['background-image']='url(\'img/background-image-2.png\')';
// ou
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.


function getBackgroundImage(el) {
alert(el.style['background-image']);
// ou
alert(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.


function getCalcBackgroundImage(el) {
alert(window.getComputedStyle(el).getPropertyValue('background-image'));
}

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


function setBackgroundImage(el) {
$(el).css('background-image','linear-gradient(red,blue)');
// ou
$(el).css('backgroundImage','linear-gradient(red,blue)');
}

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.


function getCalcBackgroundImage(el) {
alert($(el).css('background-image'));
// ou
alert($(el).css('backgroundImage'));
}

Compatibilité entre navigateurs.

Aucun problème de compatibilité : tous les navigateurs prennent correctement en charge la propriété background-image.

Colonne 1
Compatibilité des navigateurs avec la propriété CSS background-image.
Colonne 2
Possibilité d'utiliser un dégradé comme image d'arrière-plan.
Colonne 3
Possibilité d'utiliser un fichier SVG comme image d'arrière-plan.
Colonne 4
Possibilité d'utiliser comme image d'arrière-plan le rendu visuel d'un élément de la page (voir la fonction element())..
1
background-image
2
Gradients
3
SVG
4
element()
Estimation de la prise en charge en pourcentage du parc actuel.
95%
95%
95%
3%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que background-image.

Les spécifications CSS éditées par le W3C sont organisées en modules. background-image fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Résumé des propriétés de l'arrière-plan.
Mode de défilement de l'image d'arrière-plan.
Définit l'étendue de l'arrière-plan, en particulier par rapport à la bordure et aux marges intérieures..
Définit la couleur de l'arrière-plan.
Position de l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan dans le sens horizontal.
Définit comment se positionne l'image d'arrière-plan dans le sens vertical.
Définit comment est répété l'image d'arrière-plan.
Dimensionnement de l'image d'arrière-plan.
Propriété résumée qui définit l'ensemble des paramètres des bordures.
Définit le rayon de l'angle arrondi en bas à gauche.
Définit le rayon de l'angle arrondi en bas à droite.
Définit la couleur des bordures.
Résumé des propriétés des bordures réalisées avec des images.
Définit le débordement de l'image de bordure.
Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue..
Définit comment l'image de bordure est découpée.
Définit l'image utilisée pour construire la bordure.
Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.
Rayon des angles arrondis.
Type de bordure (simple, double, pointillé...).
Définit le rayon de l'angle arrondi en haut à gauche.
Définit le rayon de l'angle arrondi en haut à droite.
Définit l'épaisseur de la bordure de l'élément.
Applique un effet d'ombrage sur les blocs.