initial commit

1 files changed, 178 insertions, 0 deletions

diff --git a/files/ru/web/css/background-position/index.html b/files/ru/web/css/background-position/index.html
new file mode 100644
index 0000000000..1d3d5ab02a
--- /dev/null
+++ b/files/ru/web/css/background-position/index.html
@@ -0,0 +1,178 @@
+---
+title: background-position
+slug: Web/CSS/background-position
+translation_of: Web/CSS/background-position
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background-position</code></strong> устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного {{cssxref("background-origin")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-position.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* Ключевые значения */
+background-position: top;
+background-position: bottom;
+background-position: left;
+background-position: right;
+background-position: center;
+
+/* &lt;процент&gt; значения */
+background-position: 25% 75%;
+
+/* &lt;отрезок&gt; значения */
+background-position: 0 0;
+background-position: 1cm 2cm;
+background-position: 10ch 8em;
+
+/* Несколько изображений */
+background-position: 0 0, center;
+
+/* Значения смещения края */
+background-position: bottom 10px right 20px;
+background-position: right 3em bottom 10px;
+background-position: bottom 10px right;
+background-position: top right 10px;
+
+/* Глобальные значения */
+background-position: inherit;
+background-position: initial;
+background-position: unset;
+</pre>
+
+<p>Свойство <code>background-position</code> указывается в виде одного или нескольких значений <code><a href="#&lt;position>">&lt;position&gt;</a></code>, разделенных запятыми.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><a id="&lt;position>" name="&lt;position>"><code>&lt;position&gt;</code></a></dt>
+ <dd>{{cssxref("&lt;position&gt;")}}. Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается <code>center</code>.</dd>
+ <dd>
+ <p><strong>Синтаксис 1-значения:</strong> значение может быть:</p>
+
+ <ul>
+  <li>Значение ключевого слова <code>center</code>, которое центрирует изображение.</li>
+  <li>Одно из значений ключевых слов <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. Оно указывает край напротив, которого нужно поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.</li>
+  <li>{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}}. Оно указывает координату X относительно левого края, с координатой Y установленной на 50%.</li>
+ </ul>
+
+ <p><strong>Синтаксис с 2-значениями:</strong> одно из значений определяет X, а другое определяет Y. Каждое значение может быть:</p>
+
+ <ul>
+  <li>Одно из значений ключевых слов <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. Если здесь указаны <code>left</code> или <code>right</code>, то оно определяет  X, а другое заданное значение определяет Y. Если даны <code>top</code> или <code>bottom</code>, то оно определяет Y, а другое значение определяет X.</li>
+  <li>{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}}. Если другое значение является <code>left</code> или <code>right</code>, то оно определяет Y, относительно верхнего края. Если другое значение <code>top</code> или <code>bottom</code>, то оно определяет X, относительно левого края. Если оба значения <code>&lt;length&gt;</code> или <code>&lt;percentage&gt;</code>, то первое определяет X, а второе Y.</li>
+ </ul>
+
+ <p>Обратите внимание,что:</p>
+
+ <ul>
+  <li>Если одно значение <code>top</code> или <code>bottom</code>, то другое значение не может быть <code>top</code> или <code>bottom</code>.</li>
+  <li>Если одно значение  является <code>left</code> или <code>right</code>, то другое значение не может быть <code>left</code> или <code>right</code>.</li>
+ </ul>
+
+ <p>Это означает, например, что <code>top top</code> и <code>left right</code> являются недействительные.</p>
+ </dd>
+</dl>
+
+<h3 id="Официальный_синтаксис">Официальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Каждый из этих примеров использует свойство {{cssxref("background")}} для создания желтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exampleone"&gt;Example One&lt;/div&gt;
+&lt;div class="exampletwo"&gt;Example Two&lt;/div&gt;
+&lt;div class="examplethree"&gt;Example Three&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Общий среди всех &lt;div&gt;-ов */
+div {
+  background-color: #FFEE99;
+  background-repeat: no-repeat;
+  width: 300px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+/* В этих примерах используется сокращенное свойство 'background' */
+.exampleone {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
+}
+.exampletwo {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
+}
+
+/* Несколько фоновых изображений: каждое изображение сопоставляется
+   с соответствующей позицией, от первого указанного до последнего. */
+.examplethree {
+  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
+                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-position: 0px 0px,
+                       center;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Examples', 420, 200)}}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</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', '#background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Добавлена поддержка нескольких фонов и синтаксиса с четырьмя значениями. Изменяет определение процента, чтобы соответствовать реализациям.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Позволяет смешивать значения ключевых слов и {{cssxref("&lt;length&gt;")}} и {{cssxref("&lt;percentage&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузеров</h2>
+
+<p class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</p>
+
+<p>{{Compat("css.properties.background-position")}}</p>
+
+<h3 id="Quantum_CSS_заметки">Quantum CSS заметки</h3>
+
+<ul>
+ <li>В Gecko есть ошибка, означающая, что <code>background-position</code> не может быть {{cssxref("transition","transitioned")}} между двумя значениями, содержащими разные числа значений {{cssxref("&lt;position&gt;")}}, для примера <code>background-position: 10px 10px;</code> and <code>background-position: 20px 20px, 30px 30px;</code> (смотрите {{bug(1390446)}}). Новый параллельный CSS движок Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, который планируется выпустить в Firefox 57) исправляет это.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("background-position-x")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-position-inline")}}</li>
+ <li>{{cssxref("background-position-block")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Использование нескольких значений</a></li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>