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

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

sélecteur {
	background-image: none;
}

Valeurs

Valeur	Description
`url`	Chemin vers le fichier image. Le nom de l'image peut être entre guillemets doubles, guillemets simples ou sans guillemets.
`none`	Annule l'image de fond pour l'élément.

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 :

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

#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 :

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

#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 :

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

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

Voir aussi

la propriété background,
qui est une propriété raccourcie pour le fond