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

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

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

 

<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-x: center; 

}

</style>

<div></div>

 

결과보기

background-position-x 정의

 

배경이미지 x축위치(=수평위치) 설정.

 

---

 

1.

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

 

2. cf.

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

 

3.

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

 

4.

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

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

 

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

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

 

background-position-x 구문

 

selector {background-position-x: left|right|center|x%|xpos|xpos offset|initial|inherit;}

 

---

[속성값]

 

left

x축의 왼쪽에 배치

 

right

x축의 오른쪽에 배치

 

center

x축의 가운데에 배치

 

x%

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

• x축 기준 왼쪽은 0%, 오른쪽은 100%임. 
• 백분율 값은 배경 위치 지정 영역의 너비에서 배경 이미지의 너비를 뺀 값을 의미.

 

xpos

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

• 왼쪽에서 수평 거리 의미.
• 단위는 픽셀(0px) 또는 기타 CSS 단위 사용 가능.

 

xpos offset

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

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

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.