CSS의 background-size 속성은 요소에 적용된 배경 이미지의 크기를 지정하는 데 사용됩니다. 이 속성을 활용하면 픽셀(px), 백분율(%) 등 다양한 단위로 배경 이미지의 가로·세로 크기를 자유롭게 조절할 수 있어 반응형 웹 디자인에서 특히 유용합니다.
주요 속성값
- 길이 값(px, em 등) : 배경 이미지의 너비와 높이를 직접 지정합니다. 예를 들어
background-size: 200px 100px;처럼 작성합니다. - 백분율(%) : 부모 요소(컨테이너) 크기를 기준으로 배경 이미지의 크기를 설정합니다.
- auto : 이미지의 원본 비율을 유지한 채 크기가 자동으로 결정됩니다.
- cover : 배경 영역을 완전히 덮도록 이미지를 확대·축소합니다. 필요에 따라 이미지의 일부가 잘릴 수 있습니다.
- contain : 이미지 전체가 잘리지 않고 보이도록 배경 영역 안에 맞춰 조정합니다.
예제
다음 코드를 실행하여 CSS에서 background-size 속성이 실제로 어떻게 동작하는지 확인해 볼 수 있습니다.
<html>
<head>
<style>
#demo {
border: 5px dashed green;
padding: 10px;
background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
background-size: 200px 100px;
}
</style>
</head>
<body>
<div id="demo">
<h1>www.tutorialspoint.com</h1>
<p>The website www.tutorialspoint.com is owned and maintained by Tutorials Point India Private Limited,
henceforth termed as “we”, “our”, “us”, or the “company”. All the visitors, users, learners, contributors,
teachers, and instructors are named as "users"; and the website tutorialspoint.com is termed as "website" everywhere in this document.
We are committed to protecting your privacy online. This privacy policy explains what information we collect from you
or what information you share with us when you visit the website. We review our policy from time to time, so you are advised to check the latest version.</p>
</div>
</body>
</html>
코드 설명
위 예제에서는 초록색 점선 테두리와 10px 패딩을 가진 #demo 요소에 배경 이미지를 적용했습니다. 핵심은 background-size: 200px 100px; 부분으로, 배경 이미지의 너비를 200px, 높이를 100px로 고정하여 표시합니다. 원본 이미지보다 크거나 작게 조절할 수 있으며, 두 번째 값을 생략하면 첫 번째 값만 적용되고 높이는 자동(auto)으로 계산됩니다.
참고 사항
background-size 속성은 대부분의 최신 브라우저에서 지원되며, Internet Explorer 9 이상부터 사용할 수 있습니다. 배경 이미지가 화면 전체를 채워야 하는 히어로 섹션에는 background-size: cover;, 로고나 아이콘처럼 이미지 전체가 온전히 보여야 하는 경우에는 contain 값을 사용하는 것이 좋습니다.