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	Значение элемента наследуется от родительского элемента.