[background] CSS - background-position-y 속성 - 배경이미지 y축위치(=수직위치) 설정 (= background-position-y속성 = 백그라운드포지션와이속성)

1. background-position-y 예제 - 배경이미지 y축 위치 설정
2. background-position-y 정의
3. background-position-y 구문

background-position-y 예제 - 배경이미지 y축 위치 설정

 

<style>

div { 

  width: 300px;

  height: 300px;

  margin: auto;

  border: 1px solid gray;

  background-image: url('https://i.imgur.com/57sBeiJ.gif');

  background-repeat: no-repeat;

  background-position-y: center; 

}

</style>

<div></div>

 

결과보기

background-position-y 정의

 

배경이미지 y축위치(=수직위치) 설정.

 

---

 

1.

기본적으로 배경이미지(background-image)는 요소의 왼쪽 상단에 배치되며 수직 및 수평으로 반복됨.

 

2. cf.

• background-position 속성 - 배경이미지 x,y축 위치 일괄 지정.
• background-position-x 속성 - 배경이미지 x축위치(=수평위치) 설정.

 

3.

• 기본값: 0%
• 상속여부: X
• 애니가능: O
• CSS버전: CSS3
• JS구문: object.style.backgroundPositionY="center";

 

4.

주요 최신 브라우저 모두 지원.

단, offset 지정하는 2개 값 사용 구문은 (Firefox / Safari) 브라우저만 지원.

 

5. MDN background-position-y 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y

 

background-position-y 구문

 

selector {background-position-y: top|bottom|center|y%|ypos|ypos offset|initial|inherit;}

 

---

[속성값]

 

top

y축의 맨위에 배치

 

bottom

y축의 맨아래에 배치

 

center

y축의 가운데에 배치

 

y%

백분율로 표시한 y축 위치.  (예: 50%)

• y축 기준 맨상단은 0%, 맨하단은 100%임. 
• 백분율 값은 배경 위치 지정 영역의 높이에서 배경이미지의 높이를 뺀 값을 의미.

 

ypos

지정 단위로 표시한 y축 위치. (예: 100px, 2rem 등)

• 맨상단으로부터의 수직 거리 의미.
• 단위는 픽셀(0px) 또는 기타 CSS 단위 사용 가능.

 

ypos offset

offset 사용 구문은 (Firefox / Safari)만 지원. (예: top 30px;)

• ypos는 "top" 또는 "bottom"으로 설정. 
• offset은 ypos로 설정된 "top" 또는 "bottom"과 배경이미지와의 이격 거리. 
• 단위는 픽셀 또는 기타 CSS 단위 사용 가능.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.