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

cssselektor {
  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:

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

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

Результат:

Mysal

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

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

css#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:

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

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

Результат:

Mysal

Indi bolsa, Y okunda:

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

css#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:

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

css#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ň:

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

css#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ň:

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

css#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,