Свойство background-position-y - позиция фона по вертикали в CSS

Свойство background-position-y задает местоположение фоновой картинки элемента по вертикали.

Свойство может принимать следующие значения: top, center, bottom, а также можно указать положение фона в процентах или пикселях.

Синтаксис

селектор {
	background-position-y: значение;
}

Пример

Давайте расположим фоновую картинку вверху по вертикали:

<div id="elem"></div>
#elem {
	background-position-y: top;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

:

Пример

А теперь давайте переместим фон по центру:

<div id="elem"></div>
#elem {
	background-position-y: center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

:

Пример

А теперь укажем положение для фона в процентах:

<div id="elem"></div>
#elem {
	background-position-y: 80%;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

:

Смотрите также

  • свойство background,
    представляющее собой свойство-сокращение для фона
  • свойство background-position-x,
    которое задает позицию фона по горизонтали



Чат с GPT Компилятор