프론트엔드/Tips

모바일 기기에서 background-attachment:fixed 사용하기

Marshall K 2019. 3. 28. 23:57

라이브 데모


background-attachment:fixed에는 꽤 고질적인 문제가 있습니다.

우선 모바일 브라우저에선 사용할 수 없고, 가끔 덜컹거리고 버벅이며 스크롤이 내려간단 점입니다.

두 가지 단점을 모두 해결한 방법을 소개해 드리려 합니다.


HTML

<div class="first">
<div class="bg-wrap">
<div class="bg"></div>
</div>
</div>
<div class="second">
<div class="bg-wrap">
<div class="bg"></div>
</div>
</div>


CSS

.first, .second {
width: 100%;
height: 100vh;
position: relative
}

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

.bg {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
}

.first .bg {
background-image: url(이미지 경로)
}

.second .bg {
background-image: url(이미지 경로)
}


.first와 .second의 width나 height만 적절히 수정하셔서 사용하시면 됩니다.


background-attachment:fixed 한 줄 적는 것보다 할 일은 많지만, 효과는 보장됩니다.