background-repeat
=================

Свойство **`background-repeat`** устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.

Интерактивный пример
--------------------

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя `round`) или равномерно растянуть от конца к концу (используя `space`).

Синтаксис
---------


```css
/\* Ключевые слова \*/
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/\*Два значения: горизонтальное | вертикальное\*/
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/\* Глобальные значения \*/
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;
```

### Значения

`<repeat-style>`

Следующие однозначные имеют двухзначные эквиваленты:

| `repeat-x` | тоже самое, что и `repeat no-repeat` |
| --- | --- |
| `repeat-y` | тоже самое, что и `no-repeat repeat` |
| `repeat` | тоже самое, что и `repeat repeat` |
| `space` | тоже самое, что и `space space` |
| `round` | тоже самое, что и `round round` |
| `no-repeat` | тоже самое, что и `no-repeat no-repeat` |

В двухзначном синтаксисе первое означает горизонтальные повторения, а второе вертикальные.

| `repeat` | Изображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места. |
| --- | --- |
| `space` | Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS-свойства `background-position` игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фонового изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение `space`. |
| `round` | Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей. |
| `no-repeat` | Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS-свойством `background-position`. |

Примеры
-------

### HTML


```html
<ol>
  <li>
    no-repeat
    <div class="one">&nbsp;</div>
  </li>
  <li>
    repeat
    <div class="two">&nbsp;</div>
  </li>
  <li>
    repeat-x
    <div class="three">&nbsp;</div>
  </li>
  <li>
    repeat-y
    <div class="four">&nbsp;</div>
  </li>
  <li>
    repeat-x, repeat-y (multiple images)
    <div class="five">&nbsp;</div>
  </li>
</ol>
```

### CSS


```css
/\* Совместно для всех DIVS в примере \*/
li {
  margin-bottom: 12px;
}
div {
  background-image: url(starsolid.gif);
  width: 144px;
  height: 84px;
}

/\* повторение фона CSS \*/
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}

/\* Несколько изображений \*/
.five {
  background-image: url(starsolid.gif),
    url(https://developer.mozilla.org/static/img/favicon32.png);
  background-repeat: repeat-x, repeat-y;
  height: 144px;
}
```

### Результат

В этом примере каждому элементу списка соответствует другое значение `background-repeat`.

Спецификация
------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-repeat |

|  |  |
| --- | --- |
| Начальное значение | `repeat` |
| Применяется к | все элементы. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | нет |
| Обработка значения | список, каждый элемент которого содержит 2 ключевых слова, по одному на размер |
| Animation type | discrete |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Использование нескольких CSS фонов (en-US)