css를 사용하여 백그라운드 위치를 조정하는 방법에 대하여 알아봅니다.



# CSS의 background-position으로 백그라운드 위치 조정하기
백그라운드 위치는 background-position이라는 css 속성을 사용해 위치 조정이 가능합니다. 간단한 문법은 아래와 같습니다.

background-position: 좌우값 상하값;


설정하는 값의 단위는 px 또는 % 등을 사용할 수 있습니다. 그리고 left top bottom right center처럼 리터럴로 입력할 수도 있습니다.
background-position: 0 0;
background-position: 10px 50px;
background-position: 50% 50%;
background-position: center center;
background-position: inherit;

그럼 간단한 예제를 만들어 알어보도록 하겠습니다.


@ 백그라운드 이미지를 좌우 50% 상하 30% 조정해야하는경우...
background-position: 50% 30%;
// 좌우 상하 30%로 각각 설정

위와 같이 사용할 수 있습니다.


! 더 알아보기
background-position은 아래 두 개의 속성의 축약 속성입니다. 즉 아래처럼 각각 사용할 수 있습니다.
background-position-x: 50%;
background-position-y: 30%;

동일한 결과지만 위와 같이 사용하는 것보다는 한 번에 적용하는 background-position이 더 많이 사용됩니다.


@ 호환성 관련
하지만 위에 있는 background-position-x와 background-position-y 속성의 경우 표준 속성이 아니라 일부 브라우저 특히 파이어폭스(Firefox)에서는 적용되지 않으니 참고하시기 바랍니다.