코드를 실행하면 div 요소에 이미지가 삽입된 상태로 표시됩니다. 그런데 background-image 속성을 사용할 때 두 가지 주의사항이 있습니다.

첫째, 요소의 배경 크기가 반드시 있어야 합니다. background-image 속성은 요소의 배경에 이미지를 삽입하는 원리이기 때문에 요소 배경의 너비와 높이를 지정하지 않으면 이미지가 보이지 않습니다. 예제 코드에서 background-image 속성에 width와 height 속성을 같이 사용한 이유가 바로 이 때문입니다. 이 주의사항은 background-color 속성도 해당합니다.

둘째, 이미지의 크기가 요소의 배경 크기와 맞지 않으면 어색하게 보입니다. 예를 들어, 앞의 코드에 사용한 이미지 크기는 가로 160px, 세로 120px입니다. 그래서 코드에서 width와 height 속성을 이미지의 크기와 똑같이 지정했습니다. 그런데 요소의 배경 크기가 이미지보다 작거나 크면 어떻게 될까요? 요소의 배경이 삽입하려는 이미지보다 작은 경우부터 살펴봅시다.

div{
  width:80px; /* 이미지 크기보다 1/2 작게 설정 */
  height:60px; /* 이미지 크기보다 1/2 작게 설정 */
  background-image:url('images/coffee.jpg');
}

그림 6-39 실행결과