background-position 속성을 사용해 지정된 백그라운드의 위치 조정이 가능합니다.
background-position: 좌우값 상하값;
여기에 들어갈 값은 px 또는 % 단위로 입력할 수 있고 left top bottom right center처럼 리터럴로 입력할 수도 있습니다. 또한, inherit를 사용해 부모값을 상속 받을 수도 있죠... 그럼 예를 들어 알어보도록 하겠습니다.


#1. 백그라운드 이미지를 좌우 50% 상하 30% 조정해야하는경우...



<style type="text/css">
background-position: 50% 30%;
</style>


위와 같이 사용할 수 있습니다. 또한 위 속성은 아래처럼 나누어 쓸 수도 있죠


<style type="text/css">
background-position-x: 50%;
background-position-y: 30%;
</style>


하지만 위에 있는 background-position-x와 background-position-y 속성의 경우 파이어폭스(Firefox)에서는 적용되지 않는 점 꼭 유의하세요.