웹 페이지에 화면 전체를 채우는 배경 이미지를 적용하고 싶다면 CSS의 몇 가지 핵심 속성만 알면 됩니다. 이 글에서는 background-size: cover를 중심으로 어떤 화면 크기에서도 이미지가 잘리거나 늘어나지 않고 자연스럽게 꽉 차게 표시되는 방법을 소개합니다.
전체 페이지 배경 이미지 예제 코드
아래 코드는 브라우저 창 전체를 덮는 배경 이미지를 구현한 완전한 HTML 문서입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.background {
background-image: url("https://images.pexels.com/photos/1424246/pexels-photo-1424246.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="background"></div>
</body>
</html>핵심 CSS 속성 설명
각 속성이 어떤 역할을 하는지 하나씩 살펴보겠습니다.
1. body, html { height: 100%; margin: 0; }
html과 body 요소의 기본 높이는 콘텐츠 크기에 따라 결정되기 때문에, 화면 전체 높이를 사용하려면 명시적으로 height: 100%를 지정해야 합니다. 또한 브라우저 기본 여백(margin)을 제거해야 배경 이미지 주변에 빈 공간이 생기지 않습니다.
2. background-image
배경으로 사용할 이미지의 URL을 지정합니다. 로컬 파일 경로뿐 아니라 외부 이미지 링크도 사용할 수 있습니다.
3. background-position: center
이미지가 요소 안에서 어느 위치에 놓일지 정합니다. center로 설정하면 이미지의 중앙 부분이 항상 화면 가운데에 표시되어, 화면 크기가 달라져도 핵심 장면이 잘리지 않습니다.
4. background-repeat: no-repeat
이미지가 요소보다 작을 때 기본값으로는 바둑판처럼 반복됩니다. no-repeat로 설정하면 이미지가 한 번만 표시되어 깔끔한 배경을 만들 수 있습니다.
5. background-size: cover
가장 중요한 속성입니다. cover는 이미지의 가로세로 비율을 유지하면서 요소 전체를 완전히 덮도록 확대·축소합니다. 덮개처럼 화면을 꽉 채운다고 생각하면 이해하기 쉽습니다. 덕분에 데스크톱, 태블릿, 모바일 등 어떤 기기에서도 배경이 비어 보이지 않습니다.
실행 결과
위 코드를 실행하면 지정한 이미지가 브라우저 창 전체를 가득 채운 배경으로 표시됩니다. 창 크기를 조절해도 이미지 비율은 유지된 채 항상 화면을 덮게 됩니다.
마무리 및 팁
배경 위에 텍스트나 콘텐츠를 올릴 계획이라면, 배경 div 내부에 요소를 배치하고 display: flex와 함께 활용하면 세로 중앙 정렬 등 레이아웃 구성이 훨씬 쉬워집니다. 또한 모바일 환경에서는 용량이 큰 고해상도 이미지 대신 압축된 이미지를 사용하면 페이지 로딩 속도를 개선할 수 있습니다.