Savybė background-repeat

Savybė background-repeat nustato kaip kartoti elemento fono paveikslėlį. Pagal nutylėjimą paveikslėlis kartojamas ir X ašyje, ir Y ašyje, tokiu būdu padengdamas visą prieinamą plotą.

Sintaksė

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

Reikšmės

Reikšmė	Aprašas
`no-repeat`	Paveikslėlis visai nekartosis.
`repeat-x`	Paveikslėlis kartosis X ašyje.
`repeat-y`	Paveikslėlis kartosis Y ašyje.
`repeat`	Paveikslėlis kartosis X ašyje ir Y ašyje.
`space`	Paveikslėlis kartosis tiek kartų, kiek reikia visiškai užpildyti plotą, jei tai nepavyksta, tarp paveikslėlių pridedama tuščia erdvė.
`round`	Paveikslėlis kartosis taip, kad plote tilptų sveikas skaičius piešinių, jei to padaryti nepavyksta, tai fono piešiniai yra masteliuojami.

Numatytoji reikšmė: repeat - padengia visą ekraną raštu.

Pavyzdys

Pagal nutylėjimą fono paveikslėlis išklos visą elementą:

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

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

Pavyzdys

Padarykime, kad paveikslėlis nekartotųsi:

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

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

Pavyzdys

Dabar tegul paveikslėlis kartojasi X ašyje:

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

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

Pavyzdys

Dabar Y ašyje:

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

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

Pavyzdys

Pasikartojančius ašyse paveikslėlius galima pozicionuoti naudojant savybę 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;
}

Pavyzdys

Pažiūrėkime, kaip veikia reikšmė space:

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

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

Pavyzdys

Pažiūrėkime, kaip veikia reikšmė round:

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

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

Taip pat žiūrėkite

savybė background,
kuri yra sutrumpinta fonui skirta savybė