Уласцівасць background-repeat

Уласцівасць background-repeat задае якім чынам паўтараць фонавую карцінку элемента. Па змаўчанні карцінка паўтараецца і па восі X, і па восі Y, такім чынам пакрываючы собой усю даступную вобласць.

Сінтаксіс

cssселектар {
  background-repeat: no-repeat | repeat | repeat-x | repeat-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;
}

Результат:

Глядзіце таксама