Background-repeat hossasy

background-repeat hossasy element ýaýlag suratynyň nähili usul bilen gaýtalanmalydygyny kesgitleýär. Döredilişi boýunça surat hem X okunda, hem Y okunda gaýtalanýar, şeýlelik bilen elýeterli meýdanyň hemmesini özünde jemleýär.

Sintaksis

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

Görnüşleri

Görnüşi	Düşündiriş
`no-repeat`	Surat hiç hili gaýtalanmaýar.
`repeat-x`	Surat X okunda gaýtalanar.
`repeat-y`	Surat Y okunda gaýtalanar.
`repeat`	Surat X okunda we Y okunda gaýtalanar.
`space`	Surat meýdany doly doldurmak üçin takmynan şonça gezek gaýtalanar, eger muny ýerine ýetirip bolmasa, suratlaryň arasynda boş ýer goşulýar.
`round`	Surat meýdana ýekeliň san sany surat ýerleşjek ýaly gaýtalanar, eger muny ýerine ýetirip bolmasa, ýaýlag suratlar massştablaşdyrylýar.

Döredilişi görnüşi: repeat - ekranyň hemmesini nakyş bilen örtýär.

Mysal

Döredilişi boýunça ýaýlag surat elementyň hemmesini özünde jemler:

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

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

Mysal

Geliň, şeýle edeliň, surat gaýtalanmasyn:

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

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

Mysal

Indi bolsa, surat X okunda gaýtalansyn:

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

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

Mysal

Indi bolsa, Y okunda:

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

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

Mysal

Oklarda gaýtalanýan suratlary ýerleşdirmek üçin background-position hossasyny ulanmak bolýar:

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

Mysal

space görnüşiniň nähili işleýändigine serediň:

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

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

Mysal

round görnüşiniň nähili işleýändigine serediň:

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

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

Şeýle-de gözüňiziň ýetirih

ýaýlag üçin gysgaldylyş hossasy bolan background hossasy,