6.4.5 background-position 속성

background-position 속성으로 삽입하려는 이미지의 위치도 결정할 수 있습니다.

background-position:<x 위치> <y 위치>;

위치별로 사용할 수 있는 속성값은 다음 표와 같습니다.

표 6-14 background-position 속성값

background-position 속성값은 1개만 사용해도 되고 2개를 사용해도 됩니다. 값을 1개만 사용하면 지정한 값은 x축 값이 되고, y축 값은 기본으로 center가 됩니다. 2개를 사용하면 각각 x축과 y축 값으로 지정됩니다.

앞에서 사용한 예제에 background-position 속성값을 추가해 봅시다.

div{
  width:320px; /* 이미지 크기보다 2배 크게 설정 */
  height:240px; /* 이미지 크기보다 2배 크게 설정 */
  border:1px solid black; /* 요소의 배경 크기가 잘 보이게 테두리 설정 */
  background-image:url('images/coffee.jpg');
  background-repeat:no-repeat; 
  background-position:100%;
}