Egenskaben background-repeat

Egenskaben background-repeat angiver hvordan baggrundsbilledet for et element skal gentages. Som standard gentages billedet både langs X-aksen og Y-aksen, og dækker dermed hele det tilgængelige område.

Syntaks

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

Værdier

Værdi	Beskrivelse
`no-repeat`	Billedet gentages slet ikke.
`repeat-x`	Billedet gentages langs X-aksen.
`repeat-y`	Billedet gentages langs Y-aksen.
`repeat`	Billedet gentages langs både X-aksen og Y-aksen.
`space`	Billedet gentages så mange gange, at det fylder området helt, hvis det ikke lykkes, tilføjes tomt mellemrum mellem billederne.
`round`	Billedet gentages, så der passer et helt antal billeder i området, hvis det ikke kan lade sig gøre, skaleres baggrundsbillederne.

Standardværdi: repeat - dækker hele området med mønsteret.

Eksempel

Som standard vil baggrundsbilledet dække hele elementet:

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

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

Eksempel

Lad os gøre så billedet ikke gentages:

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

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

Eksempel

Og nu lad billedet gentage sig langs X-aksen:

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

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

Eksempel

Og nu langs Y-aksen:

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

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

Eksempel

Billeder der gentages langs akserne kan positioneres med egenskaben 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;
}

Eksempel

Lad os se hvordan værdien space fungerer:

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

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

Eksempel

Lad os se hvordan værdien round fungerer:

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

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

Se også

egenskaben background,
som er en sammentrækningsegenskab for baggrunden