Свойство background-repeat

Свойство background-repeat элементнинг фон расмини кандай усулда такрорлашни белгилайди. Соз бошида расм X ўки буйича ҳам, Y ўки буйича ҳам такрорланади, шу тарзда бутун mavуд соҳани қоплайди.

Синтаксис

селектор {
	background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Қийматлар

Қиймат	Тасниф
`no-repeat`	Расм умуман такрорланмайди.
`repeat-x`	Расм X ўки буйича такрорланади.
`repeat-y`	Расм Y ўки буйича такрорланади.
`repeat`	Расм X ўки ва Y ўки буйича такрорланади.
`space`	Расм соҳани тўлиқ тўлдириш учун етарлича такрорланади, агар бу амалга ошмаса, расмлар ўртасига бош joy қўшилади.
`round`	Расм соҳага бутун сондаги расмлар сиғадиган қилиб такрорланади, агар бу амалга ошмаса, фон расмлари миқёсланади.

Соз бошидаги қиймат: repeat - бутун экратни нақш билан қоплайди.

Мисол

Соз бошида фон расми бутун элементни қоплайди:

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

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

Мисол

Келинг, расм такрорланмайдиган қилиб қилайлик:

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

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

Мисол

Энди эса расм X ўки буйича такрорлансин:

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

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

Мисол

Энди эса Y ўки буйича:

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

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

Мисол

Ўқлар буйича такрорланувчи расмларни background-position хоссилиги ёрдамида joyлаштириш мумкин:

<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;
}

Мисол

space қийматининг ишлашини кўрамиз:

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

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

Мисол

round қийматининг ишлашини кўрамиз:

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

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

Шунингдек қаранг

фон учун қисқартирилган хосса булган background хоссилиги