CSS에서 background-image로 지정한 배경 이미지를 다양한 화면 크기에 맞게 자연스럽게 조절하려면 background-size 속성을 활용하는 것이 핵심입니다. 이 속성을 제대로 사용하면 브라우저 창 크기가 변해도 배경 이미지가 깨지거나 어색하게 잘리지 않고 유동적으로 대응됩니다.
핵심 속성: background-size
background-size에는 여러 값을 지정할 수 있으며, 그중 반응형 구현에 가장 많이 쓰이는 두 가지 값은 다음과 같습니다.
- contain: 이미지 전체가 보이도록 요소 안에 맞춰 확대·축소합니다. 이미지가 잘리지 않는 장점이 있지만, 요소와 이미지의 가로세로 비율이 다르면 빈 공간이 생길 수 있습니다.
- cover: 요소 영역을 완전히 덮도록 이미지를 확대·축소합니다. 빈 공간 없이 꽉 차게 표시되지만, 그 대신 이미지의 일부가 잘릴 수 있습니다.
예제 코드
아래 예제는 background-size: contain을 적용해 배경 이미지가 화면 크기에 맞춰 반응하도록 구현한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content="width = device-width, initial-scale = 1.0">
<style>
div {
width: 100%;
height: 300px;
border: 2px dashed blue;
background-image: url('https://www.tutorialspoint.com/python/images/python-data-science.jpg');
background-repeat: no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<p>To check the effect, you need to resize the browser.</p>
<div></div>
</body>
</html>
코드 설명
width: 100%: div 요소가 부모 요소(브라우저 창)의 전체 너비를 차지하도록 설정하여 화면 크기 변화에 함께 반응하게 합니다.height: 300px: 요소의 높이를 고정해 배경 이미지가 표시될 영역을 확보합니다.background-repeat: no-repeat: 이미지가 반복 타일링되지 않도록 하여 한 장의 이미지만 표시합니다.background-size: contain: 이미지 전체가 요소 안에 들어가도록 크기를 자동 조절하는 핵심 부분입니다.
결과 확인 방법
위 코드를 실행한 뒤 브라우저 창의 크기를 줄였다 늘려 보세요. 창 크기가 변할 때마다 배경 이미지가 요소 너비에 맞춰 자동으로 확대·축소되는 것을 확인할 수 있습니다.
만약 빈 공간 없이 요소 전체를 이미지로 채우고 싶다면 background-size 값을 cover로 변경해 보세요. 두 값의 차이를 직접 비교해 보면 상황에 맞는 선택 기준을 익히는 데 큰 도움이 됩니다.