배경 이미지 크기 조정하기

background-size CSS 속성에 배경 이미지의 가로, 세로 크기를 지정할 수 있습니다. 값을 직접 지정하면 바둑판식으로 배열되는 기본 행동(behavior)를 무시합니다. 이미지의 크기를 원하는대로 키우거나 줄일 수 있습니다. 

큰 이미지 바둑판식 배열

2982x2808 픽셀의 큰 파이어폭스 이미지가 있습니다. 300x300픽셀 엘리먼트에 이 이미지를 4개 배치하고 싶다면, 150 픽셀로 고정된 background-size 값을 사용할 수 있습니다.

HTML

<div class="tiledBackground">
</div>

CSS

.tiledBackground {
  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

Result

이미지 늘이기

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

background-size: 300px 150px;

다음과 같이 보입니다:

작은 이미지를 크게하기

큰 이미지를 줄이는 것처럼 작은 이미지를 크게할 수도 있습니다. 32x32 픽셀 파비콘을 300x300 픽셀로 늘여봅시다.

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

보시다시피, CSS는 실제로는 동일한 이미지 파일을 사용합니다.

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

길이를 나타내는 <length> 값 대신, background-size CSS 속성에 contain 과 cover 두개의 특별한 값을 지정할 수 있습니다. 살펴봅시다.

contain

contain 값을 지정하면, 배경 이미지의 가로, 세로 모두 엘리먼트보다 작다는 조건하에 가능한한 크게 조정됩니다. 이미지의 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 엘리먼트의 크기보다 항상 작거나 같습니다. 아래 예제의 크기를 조절해서 실제로 어떻게 동작하는지 확인해보세요.

HTML

<div class="bgSizeContain">
  <p>Try resizing this element!</p>
</div>

CSS

.bgSizeContain {
  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
  background-size: contain;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}

Result

cover

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

HTML

<div class="bgSizeCover">
  <p>Try resizing this element!</p>
</div>

CSS

.bgSizeCover {
  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
  background-size: cover;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}

Result

See also

문서 태그 및 공헌자

이 페이지의 공헌자: jyqry
최종 변경: jyqry,