[CSS] 스크롤에 따라 움직이는 배경 이미지

 

코드

background-attachment: fixed;
/* background-image에만 적용 */

 

 background-attachment 속성은 background-image에 적용되며, 배경 이미지를 스크롤 시에도 고정시켜서 마치 따라오는 듯한 효과를 줄 수 있습니다.

 

- scroll(기본값) : 스크롤 시 페이지와 함께 같이 움직이는 속성입니다.

- fixed : 스크롤 시 보이는 페이지(viewport)와는 다르게 배경 이미지는 고정됩니다.

 

예제 코드

 

<div class="color"></div>
<div class="image"></div>
<div class="color"></div>

배경을 채운 디자인 요소와 그 사이에 배경 이미지로 쓰일 요소를 추가해줍니다.

 

div {
  width: 100%;
  height: 100vh;
  position: relative;
}

.image {
  background: 
    url(https://cdn.pixabay.com/photo/2022/08/23/06/55/village-7405160_960_720.jpg) 
    no-repeat;
  background-attachment: fixed;
}

.color {
  background: #000;
}

이미지를 넣어줄 클래스에 background 속성을 이용해서 이미지를 넣어주고, background-attachment 속성을 이용해서 fixed 시켜줍니다.

 

도움받은 자료

https://developer.mozilla.org/ko/docs/Web/CSS/background-attachment

background-attachment - CSS: Cascading Style Sheets | MDN