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

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

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

Попробуйте

background-position-y: top;

background-position-y: center;

background-position-y: 25%;

background-position-y: 2rem;

background-position-y: bottom 32px;

<section class="display-block" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  background-color: navajowhite;
  background-image: url("/shared-assets/images/examples/star.png");
  background-repeat: no-repeat;
  height: 100%;
}

Синтаксис

/* 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;

Значения

Для этого свойства задаётся одно или несколько значений, разделённых запятыми:

top

Совмещает верхний край фонового изображения с верхним краем слоя позиционирования фона.

center

Совмещает вертикальный центр фонового изображения с вертикальным центром слоя позиционирования фона.

bottom

Совмещает нижний край фонового изображения с нижним краем слоя позиционирования фона.

<length>

Смещение горизонтального края указанного фонового изображения относительно соответствующего верхнего горизонтального края слоя позиционирования фона. (Некоторые браузеры позволяют задавать смещение относительно нижнего края.)

<percentage>

Смещение вертикального положения указанного фонового изображения относительно контейнера. Значение 0% означает, что верхний край фонового изображения совмещён с верхним краем контейнера, а значение 100% — что нижний край фонового изображения совмещён с нижним краем контейнера. Таким образом, значение 50% располагает фоновое изображение по центру по вертикали.

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

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

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;
}

Результат

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

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

См. также

• background-position
• background-position-x
• Использование нескольких фоновых изображений