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 қасиеті,
фоны үшін қысқартылған қасиет ретінде