Propriété background-image

La propriété background-image définit l'image de fond d'un élément. Par défaut, l'image va recouvrir tout le bloc avec ses copies, cependant, ce comportement peut être annulé à l'aide de la propriété background-repeat.

Syntaxe

csssélecteur {
  background-image: url(chemin vers l'image);
}

csssélecteur {
  background-image: none;
}

Valeurs

Valeur par défaut : none.

Exemple

Définissons une image de fond avec background-image, en interdisant sa répétition avec la propriété background-repeat :

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Exemple

Sans background-repeat l'image de fond va recouvrir tout le bloc :

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Exemple

On peut simultanément définir une image de fond et définir une couleur de fond à l'aide de background-color. Dans ce cas, là où il n'y aura pas d'image de fond - il y aura la couleur de fond :

html<div id="elem"></div>

css#elem {
  background-color: orange;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Voir aussi