Eienskap background-repeat

Die eienskap background-repeat spesifiseer hoe om die element se agtergrondprent te herhaal. Standaard herhaal die prent sowel op die X-as as op die Y-as, en bedek sodoende die hele beskikbare area.

Sintaksis

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

Waardes

Waarde	Beskrywing
`no-repeat`	Die prent sal glad nie herhaal nie.
`repeat-x`	Die prent sal op die X-as herhaal.
`repeat-y`	Die prent sal op die Y-as herhaal.
`repeat`	Die prent sal op die X-as en die Y-as herhaal.
`space`	Die prent sal soveel keer herhaal om die area heeltemal te vul, indien dit nie moontlik is nie, word leë spasie tussen die prente bygevoeg.
`round`	Die prent sal herhaal sodat 'n heelgetal prente in die area pas, indien dit nie moontlik is nie, word die agtergrondprente geskaleer.

Standaardwaarde: repeat - bedek die hele skerm met die patroon.

Voorbeeld

Standaard sal die agtergrondprent die hele element teël:

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

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

Voorbeeld

Laat ons maak dat die prent nie herhaal nie:

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

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

Voorbeeld

Laat die prent nou op die X-as herhaal:

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

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

Voorbeeld

En nou op die 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

Prente wat op die asse herhaal kan geposisioneer word met die eienskap 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

Laat ons kyk hoe die waarde space werk:

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

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

Voorbeeld

Laat ons kyk hoe die waarde round werk:

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

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

Sien ook

die eienskap background,
wat 'n verkorte eienskap vir die agtergrond is