CSS - Propriété background-image
Description de la propriété background-image
.
background-image
définit l'image à afficher en arrière-plan de l'élément.
Si une couleur d'arrière-plan est également définie, elle se trouvera masquée par l'image,
sauf si celle-ci contient des parties transparentes.
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 généralités sur les arrière-plans pour une présentation générale des arrières-plans.
Syntaxes pour 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.
Reportez-vous à la page arrière-plans multiples pour plus d'informations sur les arrière-plans multiples.
-
Reportez-vous à la description générale de ces valeurs.
Exemples.
Cliquez sur les exemples pour afficher leur code CSS.
Compatibilité entre navigateurs.
Aucun problème de compatibilité : tous les navigateurs prennent correctement en charge
la propriété background-image
.
Voir aussi...
Arrière-plan - Propriétés.
background
: Résumé des propriétés de l'arrière-plan.background-attachment
: Mode de défilement de l'image d'arrière-plan.background-blend-mode
: Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.background-clip
: Interaction entre arrière-plan et bordure.background-color
: Définit la couleur de l'arrière-plan.background-origin
: Position de l'image d'arrière-plan.background-position
: Emplacement de l'image d'arrière-plan.background-repeat
: Mode de répétition de l'image d'arrière-plan.background-size
: Dimensionnement de l'image d'arrière-plan.isolation
: Gère l'interaction entre les couches.mix-blend-mode
: Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.opacity
: Opacité (ou transparence).
Arrière-plan - Fonctions.
conic-gradient()
: Définit un dégradé de couleurs conique.linear-gradient()
: Détermine un dégradé de couleur linéaire.radial-gradient()
: Détermine un dégradé de couleur radial (depuis le centre vers les bords).repeating-conic-gradient()
: Définit un dégradé de couleurs conique, avec répétitionrepeating-linear-gradient()
: Détermine un dégradé de couleur linéaire avec répétition.repeating-radial-gradient()
: Détermine un dégradé de couleur radial avec répétition.