# Свойство background-repeat

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

## Синтаксис

`селектор { 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` - покрывает узором весь экран.

## Пример

По умолчанию фоновая картинка замостит собой весь элемент:

`<div id="elem"></div>` `#elem { background-image: url("bg.png"); width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

Давайте сделаем так, чтобы картинка не повторялась:

`<div id="elem"></div>` `#elem { background-repeat: no-repeat; background-image: url("bg.png"); width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

А теперь пусть картинка повторяется по оси X:

`<div id="elem"></div>` `#elem { background-repeat: repeat-x; background-image: url("bg.png"); width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

А теперь по оси Y:

`<div id="elem"></div>` `#elem { background-repeat: repeat-y; background-image: url("bg.png"); width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

Повторяющиеся по осям картинки можно позиционировать с помощью свойства `background-position`:

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

:

## Пример

Посмотрим, как работает значение `space`:

`<div id="elem"></div>` `#elem { background-repeat: space; background-image: url("bg.png"); width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

Посмотрим, как работает значение `round`:

`<div id="elem"></div>` `#elem { background-repeat: round; background-image: url("bg.png"); width: 400px; height: 300px; border: 1px solid black; }`

:

## Смотрите также

- свойство `background`,
  представляющее собой свойство-сокращение для фона

← →
↑
en ru