웹 페이지에서 스크롤할 때마다 서로 다른 배경 이미지가 나타나도록 만들면 시각적으로 매력적인 효과를 연출할 수 있습니다. 이는 여러 개의 div 요소에 각각 다른 배경 이미지를 지정하고, background-size, background-position 등의 속성을 활용하여 구현할 수 있습니다.
CSS만으로 스크롤에 따라 배경 이미지를 변경하는 방법을 예제 코드와 함께 살펴보겠습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
div {
height: 40%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.image1 { background-image: url("https://i.picsum.photos/id/827/400/400.jpg"); }
.image2 { background-image: url("https://i.picsum.photos/id/817/400/400.jpg"); }
.image3 { background-image: url("https://i.picsum.photos/id/811/400/400.jpg"); }
.image4 { background-image: url("https://i.picsum.photos/id/871/400/400.jpg"); }
.image5 { background-image: url("https://i.picsum.photos/id/471/400/400.jpg"); }
.image6 { background-image: url("https://i.picsum.photos/id/271/400/400.jpg"); }
h1 {
position: fixed;
top: 10%;
left: 40%;
background-color: rgba(0, 0, 0, 0.527);
padding: 40px;
color: white;
}
</style>
</head>
<body>
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
<h1>고정 텍스트</h1>
</body>
</html>코드 설명
이 예제의 핵심 구성 요소는 다음과 같습니다.
- 여러 개의 div 섹션: 화면 높이의 40%씩 차지하는 6개의
div요소를 세로로 배치합니다. 각div에는 서로 다른 클래스(.image1~.image6)를 지정하여 고유한 배경 이미지를 적용합니다. - background 속성:
background-position: center로 이미지를 중앙에 정렬하고,background-repeat: no-repeat으로 반복을 방지하며,background-size: cover로 영역 전체를 꽉 채우도록 설정합니다. - 고정 텍스트(h1):
position: fixed를 사용하여 제목 텍스트를 화면에 고정합니다. 덕분에 사용자가 스크롤해도 텍스트는 항상 같은 위치에 머물며, 반투명한 검은 배경(rgba(0, 0, 0, 0.527)) 덕분에 어떤 이미지 위에서도 잘 보입니다.
실행 결과
위 코드를 실행하면 페이지를 아래로 스크롤할 때마다 각 섹션마다 서로 다른 배경 이미지가 순차적으로 나타나고, 화면 중앙 상단에는 '고정 텍스트'라는 제목이 항상 고정되어 표시됩니다.
마무리
이처럼 JavaScript 없이 순수 CSS만으로도 스크롤에 따라 변화하는 배경 이미지 효과를 쉽게 구현할 수 있습니다. 여기에 background-attachment: fixed를 추가하면 패럴랙스(Parallax) 스크롤 효과까지 응용할 수 있으니, 다양한 프로젝트에 활용해 보시기 바랍니다.