initial commit

1 files changed, 209 insertions, 0 deletions

diff --git a/files/ru/web/css/background-repeat/index.html b/files/ru/web/css/background-repeat/index.html
new file mode 100644
index 0000000000..9493b0ab8d
--- /dev/null
+++ b/files/ru/web/css/background-repeat/index.html
@@ -0,0 +1,209 @@
+---
+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.cdn.mozilla.net/media/redesign/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>