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 :

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.

Arrière-plan - Fonctions.