스크롤 해도 배경 이미지는 고정하기: background-attachment

전체 wrapper에 백그라운드 이미지를 주고, 스크롤했을 시 고정이 되게 하고 싶었다.

결론을 먼저 말하자면 한 줄의 코드로 이 기능이 구현되었다.

background-attachment: fixed;

 

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

-fixed : 스크롤 시 보이는 페이지와 다르게 배경 이미지는 고정되는 속성.

 

하지만 모바일 브라우저에선 사용할 수 없고, 가끔 버벅거리는 듯한 느낌을 주며 스크롤이 내려간다.

 

해결 방법 - 배경 레이어를 따로 나누어서 적용하기

//HTML
<div class="container">
  <div class="bg"></div> // 배경 처리할 레이어를 따로 분리
  <div class="dim">
    <div class="content"></div>
  </div>
</div>

// CSS
.bg {
  position: fixed; // 배경 이미지가 아닌 배경 레이어를 고정
  top: 0;       ┓
  left: 0;      ┣ // 배경 레이어의 크기는 컨테이너의 크기와 동일하게 처리
  width: 100%;  ┃
  height: 100%; ┛
  background-image: url("img.jpg");   ┓
  background-size: cover;             ┣ // 배경 이미지는 고정이 아님
  background-position: center center; ┛
  transform: translateZ(0); // fixed된 요소의 잔상 이슈 해결
  will-change: transform; // 예상되는 변화에 관한 힌트를 브라우저에 제공하여 실제 요소가 변화되기 전에 미리 브라우저는 적절하게 최적화. 
}