--- 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">Синтаксис</h2> <pre class="brush: css no-line-numbers">/* Ключевые значения */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; /* <процент> значения */ background-position: 25% 75%; /* <отрезок> значения */ 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="#<position>"><position></a></code>, разделённых запятыми.</p> <h3 id="Values">Значения</h3> <dl> <dt><a id="<position>" name="<position>"><code><position></code></a></dt> <dd>{{cssxref("<position>")}}. Позиция определяет координату 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("<length>")}} или {{cssxref("<percentage>")}}. Оно указывает координату 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("<length>")}} или {{cssxref("<percentage>")}}. Если другое значение является <code>left</code> или <code>right</code>, то оно определяет Y, относительно верхнего края. Если другое значение <code>top</code> или <code>bottom</code>, то оно определяет X, относительно левого края. Если оба значения <code><length></code> или <code><percentage></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">Примеры</h2> <p>Каждый из этих примеров использует свойство {{cssxref("background")}} для создания жёлтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.</p> <h3 id="HTML">HTML</h3> <pre class="brush: html"><div class="exampleone">Example One</div> <div class="exampletwo">Example Two</div> <div class="examplethree">Example Three</div></pre> <h3 id="CSS">CSS</h3> <pre class="brush: css">/* Общий среди всех <div>-ов */ 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">Спецификации</h2> {{Specifications}} <p>{{cssinfo}}</p> <h2 id="Browser_compatibility">Совместимость браузеров</h2> <p>{{Compat}}</p> <h3 id="Quantum_CSS_заметки">Quantum CSS заметки</h3> <ul> <li>В Gecko есть ошибка, означающая, что <code>background-position</code> не может быть {{cssxref("transition","transitioned")}} между двумя значениями, содержащими разные числа значений {{cssxref("<position>")}}, для примера <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">Смотрите также</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>