[HTML & CSS]background-attachment:fixed 모바일에서 작동하지 않을 때 해결법

background-attachment:fixed를 사용해 모바일에서 확인해 본 결과 모바일에서는 작동하지 않거나 버벅인다.

이를 잡기 위해서는 clip-path를 이용해야 한다.

 

clip-path는 클리핑 마스크로써 다양한 모양을 만들 수 있다. 

하지만 브라우저 호환성은 한번 알아만 두자.

https://caniuse.com/?search=clip-path 

"clip-path" | Can I use... Support tables for HTML5, CSS3, etc

 

html

<div class="bg-fixed">
  <div class="bg-wrap">
    <div class="bg"></div>
  </div>
</div>

 

css

.bg-fixed {
  position: relative;
  width: 100%;
  height: 300px;
}

.bg-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-image: url("https://picsum.photos/200/300")
}

 

참고 url : https://css-tricks.com/fixed-background-effect/

The Search For a Fixed Background Effect With Inline Images | CSS-Tricks