CSS - 스크롤 해도 고정되는 배경 이미지 만들기

배경 이미지는 페이지의 분위기를 결정짓는 핵심적인 역할을 하며, 독특한 스크롤 효과는 사용자의 관심을 끌고 인터랙션을 유도합니다. 이번 글에서는 여러 배경 이미지들이 스크롤 시 고정되며, 콘텐츠가 그 위에서 스크롤 되는 효과를 구현하는 방법을 자세히 설명합니다. CSS의 background-attachment 속성을 사용하여 이러한 효과를 쉽게 만들 수 있습니다.

HTML 구조

HTML 구조는 간단합니다. 각각의 배경 이미지를 가진 <div> 태그들로 구성되어 있습니다. 각 div에는 고유의 클래스(bg_type1, bg_type2, bg_type3)가 할당되어, 특정한 배경 이미지를 지정할 수 있도록 합니다.

1
2
3
<div class="bg bg_type1"></div>
<div class="bg bg_type2"></div>
<div class="bg bg_type3"></div>

이들 각각의 div는 페이지에서 전체 높이(100vh)의 섹션으로 표시되며, 각각 다른 배경 이미지를 가집니다.

CSS 스타일

CSS에서는 해당 HTML 구조에 스타일을 적용하여 각 섹션에 배경 이미지를 넣고 위치를 고정시킵니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
.bg {
    height: 100vh;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.bg_type1 {
    background-image: url('https://picsum.photos/id/79/2000/2000');
}

.bg_type2 {
    background-image: url('https://picsum.photos/id/80/2000/2000');
}

.bg_type3 {
    background-image: url('https://picsum.photos/id/81/2000/2000');
    background-attachment: local;
}

배경 이미지 공통 스타일 (.bg)
- height: 100vh
  각 배경이 화면의 전체 높이를 차지하도록 설정합니다.
- background-position: center center
  배경 이미지가 반드시 섹션의 중심에 있도록 합니다.
- background-size: cover
  배경 이미지가 섹션의 크기에 맞게 조절되어 모든 공간을 감싸도록 합니다.
- background-repeat: no-repeat
  배경 이미지가 반복되지 않고 한 번만 표시됩니다.
- background-attachment: fixed
  스크롤 해도 배경 이미지가 고정되도록 설정합니다. 이는 이미지가 뷰포트에 상대적으로 고정되어, 사용자가 스크롤 할 때 이미지가 움직이지 않고 그 자리에 남아있게 만듭니다.
각 배경 이미지 스타일
- .bg_type1, .bg_type2는 고유한 URL의 배경 이미지를 가지며 background-attachment: fixed 속성을 통해 스크롤 해도 고정되어 있습니다.
- .bg_type3 또한 고유한 배경 이미지를 가지지만, 여기에서는 background-attachment: local 속성을 사용했습니다. 이 속성은 배경이 뷰포트가 아닌 해당 요소(div)에 상대적으로 고정되어, 요소가 스크롤 될 때 배경 이미지도 함께 스크롤 됩니다. 이를 통해 나머지 두 섹션과는 다른 스크롤 효과를 경험할 수 있습니다.

결론

CSS를 활용하여 스크롤 시에도 고정된 배경 이미지를 만드는 방법을 배웠습니다. background-attachment 속성을 사용함으로써 간단하게 배경 고정 효과를 줄 수 있으며, 사용자에게 멋진 시각적 경험을 제공합니다. 또한, 배경을 고정시키거나 이동시키는 방법을 알게 되면, 웹사이트의 다양한 섹션에 다채로운 동적 효과를 부여할 수 있습니다.