CSS background-position-y 속성

정의와 사용법

background-position-y 이 속성은 백그라운드 이미지의 y축 위치를 설정합니다.

ヒント:기본적으로, 백그라운드 이미지는 요소의 왼쪽 상단에 배치되며, 수직 및 수평 방향으로 반복됩니다.

y축에서 백그라운드 이미지를 위치시키는 방법은:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-y: center;
}

백그라운드 이미지를 상단에 위치시키는 방법은:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

y축에서 배경 이미지를 백분율로 정위치하는 방법:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 50%;
}

y축에서 배경 이미지를 픽셀로 정위치하는 방법:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 80px;
}

background-position-y: value;

값	설명
top	백그라운드 정위치를 y축의 상단에 정위치합니다.
bottom	백그라운드 정위치를 y축의 하단에 정위치합니다.
center	백그라운드 정위치를 y축의 중앙에 정위치합니다.
y%	y축의 상단은 0%, 하단은 100%입니다. 백그라운드 정위치 영역의 높이에서 백그라운드 이미지의 높이를 뺀 백분율을 의미합니다.
ypos	상단에서의 수직 거리. 단위는 픽셀(예: 0px) 또는 다른 것일 수 있습니다 CSS 단위.
ypos 오프셋	이중 값 문법, 파이어폭스와 사파리에서만 지원. ypos top 또는 bottom로 설정. 오프셋 배경 이미지와 ypos 설정의 상단 또는 하단에서의 수직 거리입니다. 단위는 픽셀(예: 0px) 또는 다른 것일 수 있습니다 CSS 단위.
기본	이 속성을 기본 값으로 설정. 참조: 기본.
thuộc	부모 요소에서 이 속성을 继承. 참조: thuộc.

기본 값:	0%
thừa kế:	아니요
애니메이션 제작:	지원. 참조:애니메이션 관련 속성.
버전:	CSS3
JavaScript 문법:	object.style.backgroundPositionY="center"

표中的数字表示第一个完全支持该属性的浏览器版本。

	크롬	에지	파이어폭스	사파리	오페라
단일 값 문법	1.0	12.0	49.0	1.0	15.0
이중 값 문법	지원하지 않음	지원하지 않음	49.0	15.4	지원하지 않음