background-position-y

Свойство background-position-y CSS задаёт начальное вертикальное положение каждого изображения фона. Положение относительно уровня позиции, заданного свойством background-origin.

Попробуйте

Значение этого свойства переопределяется любым объявлением сокращённых свойств background или background-position, применённых к элементу после него.

Синтаксис

/* Keyword values */
background-position-y: top;
background-position-y: center;
background-position-y: bottom;

/* <percentage> values */
background-position-y: 25%;

/* <length> values */
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;

/* Side-relative values */
background-position-y: bottom 3px;
background-position-y: bottom 10%;

/* Multiple values */
background-position-y: 0px, center;

/* Global values */
background-position-y: inherit;
background-position-y: initial;
background-position-y: revert;
background-position-y: revert-layer;
background-position-y: unset;

Свойство background-position-y задаётся одним или несколькими значениями, разделёнными запятыми.

Значения

top: Выравнивает верхний край изображения фона с верхним краем слоя позиционирования фона.
center: Выравнивает вертикальный центр изображения фона с вертикальным центром слоя позиционирования фона.
bottom: Выравнивает нижний край изображения фона с нижним краем слоя позиционирования фона.
<length>: Смещение заданного горизонтального края изображения фона от соответствующего верхнего горизонтального края слоя позиционирования фона. (Некоторые браузеры позволяют назначить нижний край для смещения).
<percentage>: Смещение вертикального положения заданного изображения фона относительно контейнера. Значение 0% означает, что верхний край изображения фона выровнен с верхним краем контейнера, а значение 100% означает, что нижний край изображения фона выровнен с нижним краем контейнера, таким образом, значение 50% вертикально центрирует изображение фона.

Формальное определение

Начальное значение	`0%`
Применяется к	всем элементам. Также применяется к `::first-letter` и `::first-line`.
Унаследованное	нет
Проценты	относятся к высоте области позиционирования фона минус высота изображения фона
Вычисленное значение	Список, каждый элемент которого состоит из: смещения, заданного как комбинация абсолютной длины и процента, плюс ключевое слово origin
Тип анимации	повторяющийся список

Формальный синтаксис

background-position-y = 
  [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Базовый пример

Следующий пример демонстрирует простое внедрение изображения фона, где background-position-x и background-position-y используются для определения горизонтального и вертикального позиционирования изображения отдельно.

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom;
}

Результат

Значения, относительные к сторонам

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

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background-color: seagreen;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: right 20px;
  background-position-y: bottom 10px;
}

Результат

Спецификации

Спецификация
CSS Backgrounds and Borders Module Level 4 # background-position-longhands

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`background-position-y`	1	12	49	15	1	18	49	14	1	1.0	4.4
`side-relative_values`	Нет	12–79	49	Нет	15.4	Нет	49	Нет	15.4	Нет	Нет

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y