Свойство CSS background-position

Свойство CSS background-position задаёт начальную позицию фонового изображения внутри элемента. Оно определяет, где будет «закреплено» изображение — например, в углу, по центру или на фиксированном расстоянии от края.

На этой странице рассматриваются ключевые слова, процентные значения и единицы длины, важное различие между процентами и длинами, смещение от конкретного края (синтаксис с четырьмя значениями), позиционирование нескольких фоновых изображений и наиболее распространённые ошибки.

По умолчанию значение равно 0% 0%, что помещает изображение в левый верхний угол элемента. Если фон настроен на повторение, тайлинг происходит от этой точки привязки как по горизонтали, так и по вертикали.

Начальное значение	0% 0%
Применяется к	Всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Нет.
Анимируется	Да. Позиция может изменяться.
Версия	CSS1
DOM Syntax	object.style.backgroundPosition = "center";

Синтаксис

Синтаксис свойства CSS background-position

background-position: value;

Можно задать одно или два значения:

/* One value — the second axis defaults to center */
background-position: right;        /* same as: right center */

/* Two values — horizontal first, then vertical */
background-position: left top;
background-position: 50% 25%;
background-position: 20px 100px;

/* Four values — offset from a named edge */
background-position: right 20px bottom 10px;

Проценты и единицы длины

Это тот момент, который чаще всего вызывает путаницу. Процент выравнивает одноимённую точку изображения с соответствующей точкой контейнера, тогда как единица длины (px, em и т. д.) измеряет расстояние между левыми верхними углами.

background-position: 100% 100% прижимает правый нижний угол изображения к правому нижнему углу контейнера — изображение остаётся полностью видимым.
background-position: 50% 50% (то же, что center center) центрирует изображение независимо от его размера.
background-position: 20px 0 просто сдвигает изображение на 20px вправо от левого верхнего угла; смещение не зависит от размера изображения.

Таким образом, проценты лучше подходят для «привязки к краю или центрирования», а единицы длины — для «фиксированного смещения».

Пример свойства background-position:

Пример свойства CSS background-position со значением по умолчанию

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 102px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: left top;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned at the left-top corner of the element.</p>
  </body>
</html>

Попробуйте сами »

Результат

Пример свойства background-position, заданного в процентах:

Пример свойства CSS background-position при использовании % (процентов)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: 50% 15%;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>
      The background-image is positioned 50% from the left side and 15% from the top side of the element.
    </p>
  </body>
</html>

Попробуйте сами »

Пример свойства background-position в пикселях:

Пример свойства CSS background-position при использовании px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 100px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-attachment: fixed;
        background-position: 5px 50px;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>
      The background-image is positioned 5px from the left, and 50px down from the top.
    </p>
  </body>
</html>

Попробуйте сами »

Пример свойства background-position со значением "right 100px":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 100px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: right 100px;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned 100px from the right edge, vertically centered.</p>
  </body>
</html>

Попробуйте сами »

Пример свойства background-position со значением "center center" :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 102px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-attachment: fixed;
        background-position: center center;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned center.</p>
  </body>
</html>

Попробуйте сами »

Смещение от конкретного края

Синтаксис с тремя и четырьмя значениями позволяет смещать изображение от именованного края, а не от левого верхнего угла. Каждая единица длины следует за ключевым словом, обозначающим край, от которого она отсчитывается:

/* 30px in from the right edge, 10px down from the top edge */
background-position: right 30px top 10px;

Это гораздо нагляднее, чем пытаться выразить то же самое с помощью процентов, и смещение остаётся постоянным даже при изменении размера контейнера. Поддерживается во всех современных браузерах (и Internet Explorer 9+).

Позиционирование нескольких фоновых изображений

Если у элемента несколько фоновых изображений, задайте позицию для каждого из них в виде списка, разделённого запятыми. Порядок позиций соответствует порядку изображений:

.banner {
  background-image: url("logo.png"), url("pattern.png");
  background-repeat: no-repeat, repeat;
  background-position: right top, left top;
}

Здесь логотип расположен в правом верхнем углу, а повторяющийся паттерн начинается с левого верхнего угла.

Распространённые ошибки

Неправильный порядок осей. Первое значение всегда горизонтальное, второе — вертикальное: background-position: 30px 80px означает 30px от левого края, а не от верхнего.
Забытый background-repeat: no-repeat. Если изображение повторяется, позиция задаёт лишь место начала первого тайла, поэтому эффект часто незаметен.
Путаница между процентами и длинами. 50% центрирует изображение; 50px — фиксированное смещение от угла (см. раздел выше).
Смешивать единицы в одной паре значений допустимо — background-position: center 20px является валидным и удобным значением.

Связанные свойства

background-image — задаёт позиционируемое изображение.
background-repeat — управляет повторением, что взаимодействует с точкой привязки.
background-size — масштабирование изображения влияет на разрешение позиций в процентах.
background-attachment — определяет, прокручивается ли изображение вместе со страницей или остаётся фиксированным.
background-color — резервный цвет, отображаемый там, где изображение не перекрывает фон.

Значения

Значение	Описание	Попробуйте
`left`, `center`, `right`, `top`, `bottom`	Задаёт позицию фонового изображения. Если задано только одно значение, второе по умолчанию равно `center`.	Попробуйте »
`x% y%`	Первое значение задаёт горизонтальную позицию, второе — вертикальную. `0% 0%` — левый верхний угол. `100% 100%` — правый нижний угол. Если задано только одно значение, второе по умолчанию равно `50%`.	Попробуйте »
`xpos ypos`	Первое значение задаёт горизонтальную позицию, второе — вертикальную. Единицы могут быть в пикселях (например, `0px 0px`).	Попробуйте »
`initial`	Устанавливает свойство в значение по умолчанию.	Попробуйте »
`inherit`	Наследует свойство от родительского элемента.

Практика

Какие параметры можно использовать в свойстве CSS background-position для задания позиции фонового изображения?

Процентные значенияПикселиRemКлючевые слова (top, bottom, left, right, center)Цветовые значения (hex, rgba и т. д.)