CSS / Reference / background-size

background-size는 배경 이미지의 표시 크기를 정합니다. cover는 비율을 유지하면서 영역을 채워 일부가 잘릴 수 있고, contain은 이미지 전체가 들어가도록 맞춰 빈 공간이 남을 수 있습니다.

문법과 주요 값

.hero { background-size: cover; background-position: center; }
.logo { background-size: contain; background-repeat: no-repeat; }

값의 적용 범위와 문법은 MDN의 background-size 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 background-size-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>background-size 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 240px; height: 150px; border: 12px dashed #718096; padding: 20px; background-color: #eaf2f8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Crect width='160' height='80' fill='%23006c9c'/%3E%3Ccircle cx='40' cy='40' r='24' fill='%23ffd166'/%3E%3C/svg%3E"); background-repeat: no-repeat; }
.target { background-size: cover; }
.reference { background-size: contain; }
</style>
</head>
<body>
<main id="demo">
<h1>background-size 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">cover</p><div class="target"></div></div><div class="b"><p class="label">contain</p><div class="reference"></div></div></section>
</main>
</body>
</html>

예제의 배경 도형은 160×80 비율입니다. cover는 배경 위치 지정 영역을 채우며 일부 도형이 잘릴 수 있고, contain은 도형 전체를 유지하는 대신 빈 공간이 생깁니다.

백분율과 한 값의 기준

두 값을 쓰면 첫 값은 가로, 두 번째는 세로입니다. 한 값만 쓰면 세로는 auto가 됩니다. 백분율은 원본 이미지가 아니라 배경 위치 지정 영역을 기준으로 하며 background-origin 설정에 따라 그 기준 영역이 달라집니다.

이미지 유형과 잘림 판단

사진의 중요한 부분이 잘리면 background-position을 조절하거나 contain을 검토하세요. 배경 이미지 크기를 바꿔도 요소 자체의 높이는 자동으로 생기지 않습니다. 여러 배경은 쉼표로 각각 크기를 지정할 수 있고, 그라디언트처럼 고유 크기가 없는 이미지에는 auto의 결과가 원본 사진과 다를 수 있습니다.

적용되지 않거나 예상과 다를 때

• 배경이 없으면 요소의 높이와 실제 이미지 요청부터 확인합니다.
• contain의 빈 공간에 이미지가 반복되면 background-repeat: no-repeat를 함께 지정합니다.

관련 설정을 함께 조정할 때는 잘리는 위치를 조절하는 background-position, 크기 기준 영역을 정하는 background-origin을 참고하세요.