Egenskapen background-repeat

Egenskapen background-repeat angir hvordan bakgrunnsbildet til elementet skal gjentas. Som standard gjentas bildet både langs X-aksen og Y-aksen, og dekker dermed hele det tilgjengelige området.

Syntaks

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

Verdier

Verdi	Beskrivelse
`no-repeat`	Bildet vil ikke gjentas i det hele tatt.
`repeat-x`	Bildet vil gjentas langs X-aksen.
`repeat-y`	Bildet vil gjentas langs Y-aksen.
`repeat`	Bildet vil gjentas langs både X-aksen og Y-aksen.
`space`	Bildet gjentas så mange ganger at det fyller området fullstendig, hvis dette ikke er mulig, legges det tomt rom mellom bildene.
`round`	Bildet gjentas slik at et helt antall bilder passer i området, hvis dette ikke er mulig, skaleres bakgrunnsbildene.

Standardverdi: repeat - dekker hele skjermen med mønster.

Eksempel

Som standard vil bakgrunnsbildet dekke hele elementet:

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

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

Eksempel

La oss gjøre slik at bildet ikke gjentas:

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

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

Eksempel

Og la bildet gjentas 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 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

Gjentatte bilder langs aksene kan posisjoneres ved hjelp av egenskapen 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

La oss se hvordan verdien space fungerer:

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

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

Eksempel

La oss se hvordan verdien 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å

egenskapen background,
som er en sammentrengt egenskap for bakgrunn