background-position-y 속성
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속성,
가로 방향 배경 위치를 지정합니다
