배경 이미지 크기 조정하기

background-size CSS 속성에 배경 이미지의 가로와 세로 크기를 지정하여, 원본 크기 이미지를 바둑판식으로 배열하는 기본 방식을 재설정할 수 있습니다. 이미지의 크기는 원하는대로 늘리거나 줄일 수 있습니다.

큰 이미지 바둑판식 배열

2982x2808의 커다란 Firefox 이미지를 가지고 있다고 해보겠습니다. 모종의 이유(끔찍하게 잘못된 사이트 디자인 등)로 300x300 픽셀 요소에 저 이미지 4개를 바둑판식으로 보여야 합니다. background-size와 고정값 150 픽셀로 목표를 달성할 수 있습니다.

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;
}

결과

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;
}

결과

See also

문서 태그 및 공헌자

이 페이지의 공헌자: mdnwebdocs-bot, alattalatta, jyqry
최종 변경자: mdnwebdocs-bot,