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

{{csssyntax}}

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