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+ 12.0+ 1.0+ 1.0+ 3.5+


Считаете ли это полезным?

Похожие статьи