aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/css/background-repeat/index.html
blob: b65f797aa8c85c3f3f104ceb754104d3e53e397c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
---
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('Примеры', 240, 360)}}</p>

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

{{Specifications}}

<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>