배경 이미지의 위치를 조정하는 background-position 속성

백그라운드의 위치를 조정할땐 background-position 속성을 통해 조정이 가능한데 여기에 사용가능한 값은 아래와 같습니다.

• 가로 위치 : left, center, right, 백분율, 길이

• 세로 위치 : top, center, bottom, 백분율, 길이

속성값은 background-position: x-position y-position; 인데 각자 나누어 사용해도 문제는 없습니다.

background-position 속성의 예제

예제) 배경이미지를 좌우50% 상하 30%를 조정해야할 경우

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

또는 각자의 속성을 나누어

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

위와 같은 속성을 들 수 있는데 여기서 유의해야할 점은 속성을 나누어 주게 되면 파이어폭스(Firefox)브라우저에서 구현이 안된다는 점이다.