path: root/files/ru/web/css/background-repeat/index.html

---
title: background-repeat
slug: Web/CSS/background-repeat
tags:
  - CSS
  - CSS Background
  - CSS Property
  - Reference
translation_of: Web/CSS/background-repeat
---
<div>
<p>{{CSSRef}}</p>

<p>Свойство <strong><code>background-repeat</code></strong> устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.</p>

<div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}}</div>

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

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

<p> </p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre><code>/*Ключевые значения*/
background-repeat: repeat-x;
background-repeat: repeat-y;</code>
<code>background-repeat: repeat;</code>
<code>​​​​​​​background-repeat: space;</code>
<code>​​​​​​​background-repeat: round;</code>
<code>​​​​​​​background-repeat: no-repeat;</code>

/*Два значения: горизонтальное | вертикальное*/
<code>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;</code></pre>

<h3 id="Значения">Значения</h3>

<dl>
 <dt><code><em>&lt;</em>repeat-style<em>&gt;</em></code></dt>
 <dd>Следующие однозначные имеют двухзначные эквиваленты:</dd>
 <dd>
 <table class="standard-table">
  <tbody>
   <tr>
    <td><code>repeat-x</code></td>
    <td>тоже самое, что и <code>repeat no-repeat</code></td>
   </tr>
   <tr>
    <td><code>repeat-y</code></td>
    <td>тоже самое, что и <code>no-repeat repeat</code></td>
   </tr>
   <tr>
    <td><code>repeat</code></td>
    <td>тоже самое, что и <code>repeat repeat</code></td>
   </tr>
   <tr>
    <td><code>space</code></td>
    <td>тоже самое, что и <code>space space</code></td>
   </tr>
   <tr>
    <td><code>round</code></td>
    <td>тоже самое, что и <code>round round</code></td>
   </tr>
   <tr>
    <td><code>no-repeat</code></td>
    <td>тоже самое, что и <code>no-repeat no-repeat</code></td>
   </tr>
  </tbody>
 </table>
 В двухзначном синтаксисе первое означает горизонтальные повторения, а второе вертикальные.<br>

 <table class="standard-table">
  <tbody>
   <tr>
    <td><code>repeat</code></td>
    <td>Изображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.</td>
   </tr>
   <tr>
    <td><code>space</code></td>
    <td>Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS свойства {{cssxref("background-position")}} игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фонового изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение <code>space</code>.</td>
   </tr>
   <tr>
    <td><code>round</code></td>
    <td>Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.</td>
   </tr>
   <tr>
    <td><code>no-repeat</code></td>
    <td>Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS свойством {{cssxref("background-position")}}.</td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h2 id="Примеры">Примеры</h2>

<h3 id="HTML">HTML</h3>

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

<h3 id="CSS">CSS</h3>

<pre class="brush: css">/* Совместно для всех DIVS в примере */
li {margin-bottom: 12px;}
div {
    background-image: url(https://mdn.mozillademos.org/files/12005/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(https://mdn.mozillademos.org/files/12005/starsolid.gif),
                       url(https://developer.mozilla.org/static/img/favicon32.png);
    background-repeat: repeat-x,
                       repeat-y;
    height: 144px;
}</pre>

<h3 id="Результат">Результат</h3>

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

<p>{{EmbedLiveSample('Examples', 240, 360)}}</p>

<h2 id="Спецификация">Спецификация</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов <code>space</code> и <code>round</code>, а также для фона на элементе на уровне строки путём точного определения области рисования фона.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Без существенных изменений</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>

<p>{{Compat("css.properties.background-repeat")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>
  <p id="Using_CSS_multiple_backgrounds"><a href="/ru/docs/CSS/Using_CSS_multiple_backgrounds" title="CSS/Using_CSS_multiple_backgrounds">Использование нескольких CSS фонов</a></p>
 </li>
</ul>

<p> </p>