CSS background 배경 관련 스타일(background-position)

background-position

- background-position 속성을 사용하면 배경 이미지의 위치를 지정해줄 수 있습니다.

- 기본형은 아래와 같습니다.

- 선택자 {background-position : 수평위치 수직위치; }

- 수평위치와 수직위치는 세 가지 방법으로 입력해줄 수 있습니다.

- [키워드, 백분율, 길이]로 입력해줄 수 있습니다.

 

 

- 첫 번째 방법은 키워드로 입력하는 방법입니다.

- 키워드로 입력할 때 수평위치(↔)는 left, center, right 중 하나를 입력할 수 있습니다.

- 키워드로 입력할 때 수직위치(↕)는 top, center, right 중 하나를 입력할 수 있습니다.

- 만약 속성값을 하나만 입력하면, 입력 값을 자동으로 수평위치로 인식합니다. 수직위치는 자동으로 center로 간주하게 됩니다.

- 위 예시 이미지를 보면, 키워드로 right center를 입력해주었습니다.

- 따라서 수평을 기준으로 오른쪽으로, 수직을 기준으로 가운데 위치한 것을 알 수 있습니다.

 

 

- 두 번째 방법은 백분율로 입력하는 방법입니다.

- 백분율로 입력할 때는 %를 사용하여 입력합니다.

- 백분율 또한 수평위치를 먼저 쓰고 수직위치를 써줍니다.

- 수평위치는 왼쪽부터 시작하고, 수직위치는 위쪽부터 시작합니다.

- 예를들어 0% 0%;를 입력하면, 수평위치가 왼쪽 모서리로 바짝 붙고, 수직위치가 위쪽 모서리로 바짝 붙게 됩니다.

- 위 예시 이미지를 보면, background-position 값이 30% 70%;로 입력되어 있습니다.

- 따라서 수평위치가 왼쪽 모서리로부터 30%, 수직위치가 위쪽 모서리로부터 70%의 위치에 배경 이미지가 가 자리잡은 것을 알 수 있습니다.

 

 

- 세 번째 방법은 길이로 입력하는 방법입니다.

- 길이로 입력할 때는 길이로 사용할 수 있는 값을 입력해줍니다.

- 일단 우리는 px로 알아보겠습니다.

- 길이 또한 수평위치를 먼저 쓰고 수직위치를 써줍니다.

- 마찬가지로 수평위치는 왼쪽부터 시작하고, 수직위치는 위쪽부터 시작합니다.

- 위 예시 이미지를 보면, background-position 값이 150px 30px로 입력되어 있습니다.

- 따라서 수평위치가 왼쪽 모서리로부터 150px, 수직위치가 위쪽 모서리로부터 30px의 위치에 배경 이미지가 자리잡은 것을 알 수 있습니다.

 

그럼 이만 :D