background-position-y 속성

background-position-y 속성은 요소의 배경 이미지 세로 방향 위치를 지정합니다.

이 속성은 다음 값들을 가질 수 있습니다: top, center, bottom, 그리고 백분율이나 픽셀 단위로 배경 위치를 지정할 수도 있습니다.

문법

css선택자 {
  background-position-y: 값;
}

예제

배경 이미지를 세로 방향 위쪽에 배치해 봅시다:

html<div id="elem"></div>

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

Результат:

예제

이번에는 배경을 중앙에 배치해 봅시다:

html<div id="elem"></div>

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

Результат:

예제

이번에는 백분율로 배경 위치를 지정해 봅시다:

html<div id="elem"></div>

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

Результат:

관련 항목