Background-repeat xususiyati

background-repeat xususiyati element fon rasmini qanday takrorlashni belgilaydi. Standart tarzda rasm X o'qi bo'yicha ham, Y o'qi bo'yicha ham takrorlanadi, shu tarzda butun mavjud sohani qoplab oladi.

Sintaksis

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

Qiymatlar

Qiymat	Tavsif
`no-repeat`	Rasm umuman takrorlanmaydi.
`repeat-x`	Rasm X o'qi bo'yicha takrorlanadi.
`repeat-y`	Rasm Y o'qi bo'yicha takrorlanadi.
`repeat`	Rasm X o'qi va Y o'qi bo'yicha takrorlanadi.
`space`	Rasm sohani to'liq to'ldirish uchun kerakli marta takrorlanadi, agar buni amalga oshirib bo'lmasa, rasmlar orasiga bo'sh joy qo'shiladi.
`round`	Rasm sohaga butun sonli rasmlar sig'adigan tarzda takrorlanadi, agar buni amalga oshirib bo'lmasa, fon rasmlari masshtablanadi.

Standart qiymat: repeat - butun ekranni naqsh bilan qoplaydi.

Misol

Standart tarzda fon rasmi butun elementni to'ldiradi:

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

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

Misol

Keling, rasm takrorlanmasligini amalga oshiramiz:

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

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

Misol

Endi esa rasm X o'qi bo'yicha takrorlansin:

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

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

Misol

Endi esa Y o'qi bo'yicha:

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

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

Misol

O'qlar bo'yicha takrorlanayotgan rasmlarni background-position xususiyati yordamida pozitsiyalash mumkin:

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

Misol

space qiymati qanday ishlashini ko'rib chiqamiz:

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

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

Misol

round qiymati qanday ishlashini ko'rib chiqamiz:

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

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

Shuningdek qarang

background xususiyati,
fon uchun qisqartma xususiyat hisoblanadi