Background-repeat касиети

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

Синтаксис

cssселектор {
  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 - бүт экранды өрнөк менен жаап калат.

Мисал

Демейки абалда фон сүрөтү элементини бүт бетиң жаап калат:

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

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

Результат:

Мисал

Келгиле, сүрөт кайталанбашы үчүн кылалы:

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

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

Результат:

Мисал

Эми сүрөт X огу боюнча кайталансын:

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

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

Результат:

Мисал

Эми Y огу боюнча:

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

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

Результат:

Мисал

Октор боюнча кайталануучу сүрөттөрдү background-position касиетинин жардамы менен орнотууга болот:

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

Результат:

Мисал

space мааниси кандайча иштейрин карап көрөлү:

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

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

Результат:

Мисал

round мааниси кандайча иштейрин карап көрөлү:

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

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

Результат:

Ошондой эле караңыз

background касиети,
фон үчүн кыскартылган касиет катары кызмат кылат