그림 6-43 실행결과
요소의 배경 크기는 삽입하려는 이미지보다 2배 큽니다. 이 상태에서 이미지를 반복하지 않고 background-position 속성으로 x축 값만 100%로 지정했습니다. 이렇게 하면 자동으로 y축 값은 center가 됩니다. 참고로 100%는 비율에서 가장 큰 값이기 때문에 x축에 사용하면 가장 오른쪽, y축에 사용하면 가장 아래쪽을 의미합니다. 따라서 실행결과처럼 이미지가 배경의 오른쪽 끝 가운데 위치하게 됩니다.
TIP | background-position 속성은 background-size 속성값을 cover로 지정해서 같이 사용하면 효과가 좋습니다. background-size 속성의 cover 값은 이미지의 가로와 세로 비율을 유지하면서 요소 배경을 꽉 채울 때까지 이미지를 확대하는 방식인데, 이때 background-position 속성값을 center로 지정하면 이미지가 정중앙에 있는 것처럼 보이기 때문입니다.