background-size

배경 이미지가 컨테이너를 채우는 방식을 제어합니다. bsc는 전체를 채우며(잘릴 수 있음), bsct는 전체를 보여줍니다(레터박스 발생 가능). 실무에서는 bsc를 90% 이상 사용합니다.

클래스 목록

클래스	CSS	설명
`bsc`	background-size: cover	컨테이너를 완전히 채움 (이미지가 잘릴 수 있음)
`bsct`	background-size: contain	이미지 전체를 보여줌 (여백이 생길 수 있음)
`bsa`	background-size: auto	이미지 원본 크기 유지

시각 도식

세 상자 모두 가로로 긴 같은 요소이고, 파란 영역이 배경 이미지가 실제로 차지하는 크기입니다. 원본이 상자보다 작은 가로형 이미지라고 가정했습니다.

bsa

원본 크기 그대로. 상자보다 작으면 남는 공간이 생깁니다.

bsct

가로세로 비율을 지킨 채 상자 안에 다 들어가도록 축소합니다. 위아래에 빈 띠가 남습니다.

bsc

비율을 지킨 채 상자를 덮을 때까지 확대합니다. 넘치는 부분은 잘려나갑니다.

사용 예시

히어로 배너, 카드 썸네일 등 배경 이미지를 채울 때 bsc와 bgpc, bgrn을 함께 사용합니다.

<!-- Hero banner -->
<div class="bsc bgrn bgpc h40rem">
  <h1>Hero Title</h1>
</div>

<!-- Card thumbnail -->
<div class="bsc bgrn bgpc h20rem br8px"></div>

<!-- When you need to show the full image like a logo -->
<div class="bsct bgrn bgpc h10rem"></div>

클래스별 상세

`bsc`background-size: cover

실무에서 압도적으로 많이 쓰는 값입니다. 비율을 유지한 채 요소를 빈틈없이 덮으므로 히어로 배너, 카드 썸네일, 프로필 커버에 그대로 쓸 수 있습니다. 대신 짧은 축이 잘려나가므로 위치 클래스로 초점을 정해 주는 것이 좋습니다.

<!-- Card cover: fill the frame, keep the face -->
<article class="b1pxsolid27272A br8px oh bg18181B">
  <div class="bsc bgrn bgpt h20rem"></div>
  <div class="p2rem">
    <h3 class="fs2rem fw700 cFAFAFA mb4px">Field report</h3>
    <p class="fs14px c71717A">Cover crops the bottom, never the headline.</p>
  </div>
</article>

`bsct`background-size: contain

이미지가 통째로 보여야 할 때 쓰는 값입니다. 로고, 도표, 스크린샷처럼 잘리면 정보가 사라지는 이미지에 적합합니다. 상자 비율과 이미지 비율이 다르면 남는 쪽에 빈 띠가 생기므로 배경색을 함께 지정해 두세요.

<!-- Partner logo slot: never crop, fill the gaps with a color -->
<div class="bsct bgrn bgpc h8rem w20rem bgFFFFFF br8px"></div>

`bsa`background-size: auto

기본값입니다. 이미지의 원래 픽셀 크기를 그대로 씁니다. 아이콘이나 무늬 타일처럼 크기를 조작하면 안 되는 배경에 쓰며, 다른 값에서 되돌릴 때도 씁니다.

<!-- Pattern tile at its authored size, repeating -->
<div class="bsa bgrr h20rem br8px"></div>

<!-- Single icon at its intrinsic size: remember no-repeat -->
<div class="bsa bgrn bgpc w4rem h4rem"></div>

실전 예시 — 히어로 배너와 로고 슬롯

같은 화면 안에서 사진은 채우고 로고는 전부 보여야 하는 상황입니다. 사진에는 채우기, 로고 자리에는 맞추기를 쓰고 남는 여백은 배경색으로 메웁니다.

<section class="pr h40rem bsc bgrn bgpc df fdc jcfe p3-2rem">
  <!-- Photo fills the hero and is cropped around the center -->
  <h1 class="fs4rem fw800 cFFFFFF lh1-2 mb8px">Built in the open</h1>
  <p class="fs16px cA1A1AA">Cover plus center is the default hero recipe.</p>
</section>

<div class="df fww gap2rem p3-2rem">
  <!-- Logos must stay whole, so contain plus a solid backdrop -->
  <div class="bsct bgrn bgpc w15rem h6rem bgFFFFFF br8px"></div>
  <div class="bsct bgrn bgpc w15rem h6rem bgFFFFFF br8px"></div>
  <div class="bsct bgrn bgpc w15rem h6rem bgFFFFFF br8px"></div>
</div>

팁 / 주의사항

cover는 반드시 위치와 함께 쓸 것

채우기는 넘치는 축을 잘라냅니다. 위치를 지정하지 않으면 가운데를 기준으로 잘리므로, 인물 사진이라면 상단 고정을 함께 지정해 얼굴이 남도록 해야 합니다.

contain은 빈 띠를 만든다

맞추기는 남는 축에 여백을 남깁니다. 그 여백에는 요소의 배경색이 그대로 드러나므로, 배경색을 정해 두지 않으면 페이지 색이 비쳐 보여 어색해집니다.

요소 높이가 없으면 아무것도 안 보인다

배경 이미지는 요소 크기를 만들어 주지 않습니다. 비어 있는 요소에 채우기를 지정하고 높이를 주지 않으면 높이가 0이라 이미지가 전혀 보이지 않습니다.

고해상도 원본을 그대로 채우면 비용이 크다

채우기는 확대도 서슴지 않으므로 작은 카드에 대형 원본을 넣어도 화면상으로는 멀쩡해 보입니다. 다운로드 용량과 디코딩 비용은 그대로이므로 썸네일용 이미지를 따로 준비하세요.

반복과 함께 쓰면 결과가 달라진다

원본 크기 유지 값에서는 이미지가 상자보다 작을 때 기본 반복이 남는 공간을 타일로 채웁니다. 한 장만 보이길 원한다면 반복 끄기를 반드시 함께 지정하세요.

cover vs contain

bsc는 빈 공간 없이 채우지만 이미지가 잘릴 수 있고, bsct는 이미지 전체를 보여주지만 빈 공간이 생길 수 있습니다.

필수 조합

배경 이미지에는 bsc bgrn bgpc를 세트로 사용하는 것이 일반적입니다.

background-repeat background-position background-attachment background-clip background-origin background