Backgrounds and borders/Resizing background images with background-size

김동현·2026년 3월 18일

mdn 학습 번역 - CSS

목록 보기

40/190

background-size로 배경 이미지 크기 조절하기 (Resizing background images with background-size)

background-size CSS 속성을 사용하면 요소의 배경 이미지 크기를 여러분 마음대로 조절할 수 있어요. 이미지가 원래 가진 전체 크기 그대로 타일처럼 반복해서 깔리는(tiling) 기본 동작을 덮어쓰고, 이미지의 너비(width)와 높이(height)를 직접 지정할 수 있죠. 이를 통해 원하는 만큼 이미지를 크게 확대하거나 작게 축소할 수 있습니다.

💡 강사님의 꿀팁: 배경 이미지를 다룰 때 background-size는 그야말로 필수 중의 필수입니다! 특히 화면 크기가 변하는 반응형 웹을 만들 때, 이미지가 찌그러지거나 이상하게 잘리지 않게 하려면 이 속성의 동작 원리를 완벽하게 이해해야 한답니다.

아주 큰 이미지 바둑판식으로 배열하기 (Tiling a large image)

아주 거대한 2982x2808 픽셀짜리 Firefox 로고 이미지가 있다고 가정해 볼게요. (아마도 끔찍하게 나쁜 사이트 디자인을 의도한 거겠지만요!) 이 이미지의 복사본 4개를 300x300 픽셀 크기의 요소 안에 타일처럼 바둑판식으로 깔아보고 싶습니다. 이렇게 하려면 고정된 background-size 값으로 150픽셀을 주면 됩니다.

📝 보충 설명: 너비를 150px로 고정하면, 300px 크기의 상자 안에는 가로로 2개(150px 2), 세로로 2개(150px 2)가 들어가서 총 4개의 이미지가 예쁘게 바둑판 모양으로 들어가게 되는 원리랍니다.

HTML

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

CSS

.tiledBackground {
  background-image: url("https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png");
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

결과 (Result)

MDN Playground에서 이 예제 실행해보기 (Run example in MDN Playground)

이미지 늘리기 (Stretching an image)

이미지의 가로(수평) 크기와 세로(수직) 크기를 모두 명시적으로 지정할 수도 있습니다. 이렇게 말이죠:

background-size: 300px 150px;

결과는 다음과 같이 나타납니다:

💡 강사님의 꿀팁: 이렇게 값을 두 개 주면 첫 번째는 너비(width), 두 번째는 높이(height)가 됩니다. 하지만 원본 이미지의 고유한 가로세로 비율(aspect ratio)을 무시하고 임의의 값을 주게 되면, 위 이미지처럼 뚱뚱해지거나 홀쭉하게 찌그러져 보일 수 있으니 주의해야 해요!

이미지 확대하기 (Scaling an image up)

반대로 배경 이미지를 크게 확대(스케일 업)할 수도 있습니다. 아래 예제에서는 32x32 픽셀짜리 아주 작은 파비콘(favicon) 이미지를 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 코드는 본질적으로 앞선 예제와 완전히 동일합니다.

📝 보충 설명: 작은 비트맵(png, jpg) 이미지를 강제로 크게 늘리면 이미지가 깨지거나 흐릿해지는 '픽셀화(pixelation)' 현상이 나타나요. 위 이미지에서도 계단 현상이 보이죠? 요즘 현업에서는 이런 문제를 피하기 위해, 아무리 확대해도 깨지지 않는 SVG 벡터 이미지를 배경으로 많이 활용한답니다.

특별한 값: `contain`과 `cover` (Special values: `contain` and `cover`)

고정된 <length> (길이) 값들 외에도, background-size CSS 속성에는 아주 특별하고 강력한 두 가지 크기 값인 contain과 cover가 있습니다. 이 녀석들을 자세히 살펴볼까요?

💡 강사님의 꿀팁: 실무에서 배경 이미지를 설정할 때 픽셀을 직접 계산해서 넣기보다 이 cover와 contain을 압도적으로 많이 사용합니다. 별표 백 개짜리 핵심 내용이니 꼭 기억해 두세요!

`contain`

contain 값은 이미지를 담고 있는 컨테이너 상자의 크기가 어떻든 간에, 배경 이미지의 어떤 변(가로 또는 세로)도 컨테이너를 뚫고 나가지 않는 선에서 이미지가 가능한 한 최대한 크게 확대(또는 축소)되도록 지정합니다. 이 속성이 어떻게 동작하는지 확인하려면 아래 예제 요소의 크기를 이리저리 조절해 보세요.

📝 보충 설명: 쉽게 말해서 "사진이 잘리는 건 절대 용납 못 해! 여백이 생기더라도 사진 전체가 무조건 다 보이게 박스 안에 쏙(contain) 들어가게 해!"라고 브라우저에게 명령하는 겁니다.

HTML

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

CSS

.bgSizeContain {
  background-image: url("https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png");
  background-size: contain;
  width: 160px;
  height: 160px;
  border: 2px solid;
  resize: both;
  overflow: scroll;
}

결과 (Result)

MDN Playground에서 이 예제 실행해보기 (Run example in MDN Playground)

(박스의 우측 하단을 드래그하여 크기를 변경해도, 로고의 전체 모습이 잘리지 않고 유지되면서 크기만 변하는 것을 볼 수 있습니다.)

`cover`

cover 값은 배경 이미지가 컨테이너의 가로와 세로 길이보다 크거나 같도록 유지하면서, 이미지가 가능한 한 가장 작게 맞춰지도록 지정합니다. 쉽게 말해, 빈 공간이 하나도 남지 않도록 꽉 채우는 거죠. 이 속성이 어떻게 동작하는지 아래 예제의 크기를 조절해서 확인해 보세요.

📝 보충 설명: 쉽게 말해서 "박스 안에 빈 여백이 보이는 건 절대 용납 못 해! 사진의 일부가 잘려 나가더라도 무조건 빈틈없이 상자를 꽉 덮어(cover)버려!"라고 명령하는 것입니다. 풀스크린 배경이나 히어로(Hero) 배너를 만들 때 가장 애용되는 마법의 키워드입니다!

HTML

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

CSS

.bgSizeCover {
  background-image: url("https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png");
  background-size: cover;
  width: 160px;
  height: 160px;
  border: 2px solid;
  resize: both;
  overflow: scroll;
}

결과 (Result)

MDN Playground에서 이 예제 실행해보기 (Run example in MDN Playground)

(박스를 드래그하여 직사각형 모양으로 만들어보세요. 빈 공간이 생기지 않도록 이미지의 윗부분이나 양옆이 잘려나가면서 박스를 꽉 채우는 것을 볼 수 있습니다.)

참고 자료 (See also)

더 깊이 알아보고 싶다면 아래의 MDN 공식 문서들을 참고해 보세요:

MDN 개선에 도움을 주세요 (Help improve MDN)

이 문서가 학습에 도움이 되셨나요? (Was this page helpful to you?)
[Yes][No]

문서 기여 방법 알아보기: Learn how to contribute
최종 수정일: 2025년 11월 20일 (MDN contributors 작성)
이 문서를 GitHub에서 보기 | 문서의 문제점 신고하기

김동현

프론트에_가까운_풀스택_개발자

이전 포스트

Backgrounds and borders/Using multiple backgrounds

다음 포스트

Backgrounds and borders/Resizing background images with background-size

mdn 학습 번역 - CSS

background-size로 배경 이미지 크기 조절하기 (Resizing background images with background-size)

아주 큰 이미지 바둑판식으로 배열하기 (Tiling a large image)

HTML

CSS

결과 (Result)

이미지 늘리기 (Stretching an image)

이미지 확대하기 (Scaling an image up)

특별한 값: `contain`과 `cover` (Special values: `contain` and `cover`)

`contain`

HTML

CSS

결과 (Result)

`cover`

HTML

CSS

결과 (Result)

참고 자료 (See also)

MDN 개선에 도움을 주세요 (Help improve MDN)

Backgrounds and borders/Using multiple backgrounds

Backgrounds and borders/Scaling SVG backgrounds

0개의 댓글

Backgrounds and borders/Resizing background images with background-size

mdn 학습 번역 - CSS

background-size로 배경 이미지 크기 조절하기 (Resizing background images with background-size)

아주 큰 이미지 바둑판식으로 배열하기 (Tiling a large image)

HTML

CSS

결과 (Result)

이미지 늘리기 (Stretching an image)

이미지 확대하기 (Scaling an image up)

특별한 값: contain과 cover (Special values: contain and cover)

contain

HTML

CSS

결과 (Result)

cover

HTML

CSS

결과 (Result)

참고 자료 (See also)

MDN 개선에 도움을 주세요 (Help improve MDN)

Backgrounds and borders/Using multiple backgrounds

Backgrounds and borders/Scaling SVG backgrounds

0개의 댓글

특별한 값: `contain`과 `cover` (Special values: `contain` and `cover`)

`contain`

`cover`