background-image - Propriété CSS
Résumé des caractéristiques de la propriété background-image
Plusieurs images ou dégradés peuvent être définis dans le cas d'arrière-plans multiples.
none
none
background-image
passe d'une valeur à l'autre sans transition.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:
;
- 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 pageurl()
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()
etconic-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.
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
.
background-image
.
element()
)..
background-image
element()
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.