Eigenschap background-image

De eigenschap background-image specificeert een achtergrondafbeelding voor een element. Standaard zal de afbeelding het volledige blok vullen met haar kopieën, echter, dit gedrag kan worden uitgeschakeld met de eigenschap background-repeat.

Syntaxis

selector {
	background-image: url(pad naar afbeelding);
}

selector {
	background-image: none;
}

Waarden

Waarde	Beschrijving
`url`	Pad naar het afbeeldingsbestand. De bestandsnaam van de afbeelding kan tussen dubbele aanhalingstekens staan, enkele aanhalingstekens, of helemaal zonder aanhalingstekens.
`none`	Schakelt de achtergrondafbeelding voor het element uit.

Standaardwaarde: none.

Voorbeeld

Laten we een achtergrondafbeelding instellen met background-image, en het herhalen ervan uitschakelen met de eigenschap background-repeat:

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

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

Voorbeeld

Zonder background-repeat zal de achtergrondafbeelding het volledige blok vullen:

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

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

Voorbeeld

Je kunt gelijktijdig een achtergrondafbeelding instellen en een achtergrondkleur instellen met background-color. In dit geval, waar de achtergrondafbeelding niet is, zal de achtergrondkleur zichtbaar zijn:

<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;
}

Zie ook

de eigenschap background,
wat een shorthand-eigenschap is voor de achtergrond