Background-repeat касиети

background-repeat касиети элементдин фон сүрөтүн кандайча кайталашын аныктайт. Демейки абалда сүрөт X огу боюнча да, Y огу боюнча да кайталанат, ошондо ал жеткиликтүү аянттын бүт бетиң жаап калат.

Синтаксис

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

Маанилер

Маани	Сүрөттөмө
`no-repeat`	Сүрөт таптакыр кайталанбайт.
`repeat-x`	Сүрөт X огу боюнча кайталанат.
`repeat-y`	Сүрөт Y огу боюнча кайталанат.
`repeat`	Сүрөт X огу жана Y огу боюнча кайталанат.
`space`	Сүрөт аянтты толугу менен толтуруу үчүн канча жолу кайталанышы керек болсо, ошончо жолу кайталанат, эгерде бул мүмкүн болбосо, сүрөттөрдүн ортосунда бош орун кошулат.
`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 касиетинин жардамы менен орнотууга болот:

<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 касиети,
фон үчүн кыскартылган касиет катары кызмат кылат