[CSS] Background Image Size handling

큰 이미지를 작게해서 반복하기

1233x1233 픽셀의 굉장히 큰 파이어폭스 로고를 150x150 픽셀로 작게 하고 반복한 배경을 300x300 픽셀의 엘리먼트에 지정해 봅시다. 엘리먼트의 가로, 세로 크기는 300픽셀이고 로고의 가로, 세로 크기는 150픽셀이므로 로고는 4번 반복될 것입니다.

다음과 같은 CSS를 사용하면 됩니다.

.square {
  width: 300px;
  height: 300px;
  background-image: url(fxlogo.png);
  border: solid 2px;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
  background-size: 150px;
}
 

이제 background-size 앞에 접두어(역자: -webkit-, -moz- 등)는 더 이상 필요하지 않습니다. 만약 굉장히 오래된 특정 브라우저에 적용하려면 접두어가 필요합니다. 

이미지 늘이기

가로, 세로 크기를 각각 지정할 수도 있습니다. 

background-size: 300px 150px;

다음과 같이 보입니다.

작은 이미지를 크게하기

큰 이미지를 줄이는 것처럼 작은 이미지를 크게 할 수도 있습니다. 160x160픽셀 이미지를 300x300픽셀로 늘여봅시다.

.square2 {
  width: 300px;
  height: 300px;
  background-image: url(favicon.png);
  background-size: 300px;
  border: solid 2px;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}
 

특별한 값: "contain"과 "cover"

길이를 나타내는 <length> 값 대신에 contain 과 cover라는 두개의 특별한 값을 지정할 수도 있습니다.

contain

contain으로 지정하면 배경 이미지의 가로, 세로 길이 모두 엘리먼트 안에 들어온다라는 조건하에 가능한한 배경 이미지를 크게 조정합니다. 가로/세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 엘리먼트의 크기보다 항상 작거나 같습니다. 이 창의 크기를 바꾸어서 아래 엘리먼트의 배경이 어떻게 변하는지 확인하여 보세요.

Try resizing this window and see what happens.

위 예제에 사용된 CSS는 다음과 같습니다.

width: 100%;
height: 200px;
background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
background-size: contain;
border: solid 2px;
 

cover

cover로 지정하면 배경 이미지의 가로, 세로 길이 모두 엘리먼트보다 크다라는 조건하에 가능한한 배경 이미지를 작게 조정합니다. 가로/세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 엘리먼트의 크기보다 항상 크거나 같습니다. 이 창의 크기를 바꾸어서 아래 엘리먼트의 배경이 어떻게 변하는지 확인하여 보세요.

Try resizing this window and see what happens.

위 예제에서 사용한 CSS는 다음과 같습니다.

width: 100%;
height: 200px;
background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
background-size: cover;
border: solid 2px;
 

더 보기

• background-size
• background

문서 태그 및 공헌자

 태그:  

• CSS

 이 페이지의 공헌자: mrstork, teoli, jaemin_jo

 최종 변경: mrstork, 2016. 1. 30. 오후 4:25:31