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

  Reportez-vous à la page arrière-plans multiples pour plus d'informations sur les arrière-plans multiples.

• background-image: inherit | initial | unset;

  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étition
• repeating-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.