Eigenschap background-repeat

De eigenschap background-repeat specificeert hoe een achtergrondafbeelding van een element moet worden herhaald. Standaard wordt de afbeelding herhaald zowel langs de X-as als de Y-as, waardoor de beschikbare ruimte volledig wordt bedekt.

Syntaxis

selector {
	background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Waarden

Waarde	Beschrijving
`no-repeat`	De afbeelding wordt helemaal niet herhaald.
`repeat-x`	De afbeelding wordt herhaald langs de X-as.
`repeat-y`	De afbeelding wordt herhaald langs de Y-as.
`repeat`	De afbeelding wordt herhaald langs zowel de X-as als de Y-as.
`space`	De afbeelding wordt zo vaak herhaald dat de ruimte volledig wordt gevuld; als dit niet lukt, wordt er lege ruimte tussen de afbeeldingen toegevoegd.
`round`	De afbeelding wordt zo herhaald dat er een geheel aantal afbeeldingen in de ruimte past; als dit niet lukt, worden de achtergrondafbeeldingen geschaald.

Standaardwaarde: repeat - bedekt het hele scherm met een patroon.

Voorbeeld

Standaard zal de achtergrondafbeelding de hele element betegelen:

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

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

Voorbeeld

Laten we instellen dat de afbeelding niet wordt herhaald:

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

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

Voorbeeld

En nu laten we de afbeelding langs de X-as herhalen:

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

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

Voorbeeld

En nu langs de Y-as:

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

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

Voorbeeld

Herhaalde afbeeldingen langs de assen kunnen worden gepositioneerd met de eigenschap background-position:

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

#elem {
	background-repeat: repeat-y;
	background-position: top center;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voorbeeld

Laten we kijken hoe de waarde space werkt:

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

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

Voorbeeld

Laten we kijken hoe de waarde round werkt:

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

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

Zie ook

de eigenschap background,
een verkorte eigenschap voor de achtergrond