Свойство 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,
което е съкратено свойство за фона