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

Определение и использование

background-position-y Эта свойство используется для определения положения фонового изображения по оси Y.

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

Пример

Пример 1

Как определить положение фонового изображения по оси Y?

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-y: center;
}

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

Пример 2

Как определить положение фонового изображения вверху?

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

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

пример 3

Как использовать проценты для позиционирования фона по оси y:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 50%;
}

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

пример 4

Как использовать пиксели для позиционирования фона по оси y:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 80px;
}

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

CSS грамматика

background-position-y: value;

значение атрибута

значение описание
top положить фоновое изображение в верх оси y.
bottom положить фоновое изображение в низ оси y.
center положить фоновое изображение в центр оси y.
y%

верх оси y составляет 0%, низ - 100%.

процентные значения указывают на высоту области позиционирования фона минус высота фонового изображения.
ypos

вертикальное расстояние от верха.

единицы могут быть пикселями (например, 0px) или другими Единицы CSS.
ypos offset

двухзначная грамматика, поддерживается только в Firefox и Safari.

  • ypos установить в top или bottom.
  • offset это вертикальное расстояние от верха или низа фона до заданного значения ypos.

единицы могут быть пикселями или другими Единицы CSS.
initial установить этот атрибут в его значение по умолчанию. См. initial.
inherit переходит от родительского элемента. См. inherit.

технические детали

по умолчанию: 0%
наследование: нет
создание анимации: поддерживается. См.:свойства анимации.
Версия: CSS3
JavaScript грамматика: object.style.backgroundPositionY="center"

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

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
однозначная грамматика 1.0 12.0 49.0 1.0 15.0
двухзначная грамматика не поддерживается не поддерживается 49.0 15.4 не поддерживается

связанные страницы

Урок:Фон в CSS

CSS справочник:атрибут background-image

CSS справочник:атрибут background-position

CSS справочник:атрибут background-position-x

HTML DOM справочник:атрибут backgroundPosition