Omadus background-repeat

Omadus background-repeat määrab, kuidas elemendi taustapilti korratakse. Vaikimisi kordub pilt nii X-telje kui ka Y-telje suunas, kattes seeläbi kogu saadaoleva ala.

Süntaks

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

Väärtused

Väärtus	Kirjeldus
`no-repeat`	Pilti ei korrata üldse.
`repeat-x`	Pilt kordub X-telje suunas.
`repeat-y`	Pilt kordub Y-telje suunas.
`repeat`	Pilt kordub nii X- kui Y-telje suunas.
`space`	Pilti korratakse nii mitu korda, kui vaja ala täielikuks täitmiseks, kui see ei õnnestu, lisatakse piltide vahele tühik.
`round`	Pilti korratakse nii, et alale mahuks täisarv pilte, kui see ei õnnestu, siis taustapildid skaleeritakse.

Vaikeväärtus: repeat - katab mustriga kogu ekraani.

Näide

Vaikimisi katab taustapilt kogu elemendi:

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

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

Näide

Teeme nii, et pilti ei korrataks:

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

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

Näide

Nüüd kordub pilt X-telje suunas:

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

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

Näide

Nüüd Y-telje suunas:

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

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

Näide

Telgede suunas korduvaid pildi saab positsioneerida kasutades omadust 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;
}

Näide

Vaatame, kuidas väärtus space töötab:

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

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

Näide

Vaatame, kuidas väärtus round töötab:

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

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

Vaata ka

omadus background,
mis on tausta lühendomadus