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

Свойство background-position-y устанавливает вертикальное положение фона.

Одно или несколько значений могут быть указаны через запятые.

Отрицательные значения допустимы.
Это экспериментальное свойство.
Значение по умолчанию top
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Нет
Версия CSS4
DOM синтаксис object.style.backgroundPositionY = "bottom";

Синтаксис

background-position-y: top | center | bottom | length | percentage | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
      background-position-x: left; 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства background-position-x</h2>
  </body>
</html>

Пример со значением bottom:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      html { 
      height: 50%;
      }
      body {
      background: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat; 
      background-position-y: bottom;   
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства background-position-y</h2>
  </body>
</html>

Значения

Значение Описание
top Выравнивает верхний край фонового изображения по верхнему краю фонового позиционирующего слоя.
center Выравнивает центр фонового изображения по центру фонового позиционирующего слоя.
bottom Выравнивает нижний край фонового изображения по нижнему краю фонового позиционирующего слоя.
length Указывает смещение левого горизонтального края фонового изображения от левого горизонтального края фонового позиционирующего слоя.
percentage Указывает смещение вертикального положения фонового изображения относительно контейнера. 0% выравнивает левый край фонового изображения с левым краем контейнера, 100% выравнивает правый край фонового изображения с правым краем контейнера, а 50% горизонтально выравнивает по центру фоновое изображение.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome firefox safari opera
4.0+ 49.0+ 3.1+ 15.0+

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

Какими значениями могут быть значения свойства CSS 'background-position-y'?
Считаете ли это полезным?