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

CSS свойство background-position задает начальное положение свойства background-image.

Если установлено значение по умолчанию, свойство background-position будет расположено в левом верхнем углу элемента. Если задано повторение фона, то фон будет повторяться и по вертикали, и по горизонтали.

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

Синтаксис

background-position: value;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p>Фоновое изображение расположено в левом верхнем углу элемента.</p>
  </body>
</html>

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

Пример, где можно увидеть, как установить свойство background-position, используя проценты:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p>Смещение от левой границы 50% и 15% от верхней границы элемента.</p>
  </body>
</html>

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body { 
      padding: 100px;
      background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 5px 50px; 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства background-position</h2>
    <p>Положение фонового изображения равно 5px от левого края и 50px от верхнего края.</p>
  </body>
</html>

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

Значения

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


1.0+	1.0+	1.0+	3.5+

1.0+

3.5+

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

Синтаксис

Пример

Пример

Пример

Значения

Поддержка браузера

Практикуйте свои знания