css

CSS TIP! – IE10이하 버전에서 배경이미지에 ‘background-attachment: fixed’ 설정했을 때 마우스 스크롤 시 버벅거리는 현상 없애는 팁

핑계/ editor

  • 2 comments
  • 1,989 views
  • 2017년 7월 25일

배경이미지에 ‘background-attachment: fixed;’속성을 추가한 후 마우스로 스크롤할 때
IE10 이하 버전 브라우저에서는 버벅임 현상이 발생하죠?
CSS만으로 수정해보아요~

CSS background 속성중에 ‘background-attachment: fixed’ 라는 속성을 사용하면
웹브라우저를 스크롤 할때 배경 이미지가 마우스 스크롤을 따라서 움직이지 않고 고정되어 있어서 특별한 느낌이 나는것을 볼 수 있습니다.

이 재미있는 효과를 모든 브라우저에서 동일하게 보여주고 싶은데
IE브라우저에서만 버벅임이 발생합니다.. ㅠㅜ (IE10이하 버전에서만….)

caniuse 사이트에서 확인해본 결과
IE11 브라우저부터 ‘background-attachment’속성을 지원하는 걸 볼 수 있습니다.

 

<section>요소에 background-image 3개를 이용해서
‘background-attachment: fixed’ 속성을 추가한 뒤 IE10 브라우저에서 확인해볼께요 ~~

Markup

<body>
<main>
        <section>
                <p>page1</p>
        </section>
        <section>
                <p>page2</p>
        </section>
        <section>
                <p>page3</p>
        </section>
</main>
</body>

CSS

section {
        width: 100%;
        height: 100vh;
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
        overflow: hidden;
}
section:nth-child(1) {
        background-image: url('woman.jpg');
}
section:nth-child(2) {
        background-image: url('pier.jpg');
}
section:nth-child(3) {
        background-image: url('book.jpg');
}
section p {
        text-align: center;
        font-size: 80px;
        color: #fff;
        opacity: 0.8;
}

IE10 브라우저에서 확인해본 결과
아래와 같이 스크롤 할 때 배경 이미지 전체가 버벅이는 것을 볼 수 있습니다.

보기 싫지 않나요??
그런데 간단하게 CSS몇줄만 추가하면 IE10이하 브라우저에서 버벅임 현상을 없앨 수 있더라구요~
지금부터 공유할께요.

추가 CSS

html {
        overflow: hidden;
        height: 100%;
}
body {
        overflow: auto;
        height: 100%;
}

<html>과 <body>요소에 위처럼 ‘overflow’와 ‘height’ 속성을 추가하면 아래처럼 깔끔하게 해결됩니다.

제가 해본 결과
jquery를 사용해서 fullpage처럼 한번 스크롤 할때 배경이미지 한장 전체가 넘어가게 할때에는
<html>요소에 ‘height’ 속성을 지워야 스크롤이 되었습니다.

상황에 맞게 CSS를 수정해서 사용해주세요 ~~
끝까지 읽어주셔서 감사합니다.

핑계

댓글 먹고 살아요~

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
gheehmyo2853 Recent comment authors
newest oldest most voted
hmyo2853
Guest
hmyo2853

감사합니다. 도움이 많이 되었어요 😀

ghee
Guest
ghee

감사합니다! 덕분에 문제를 해결했습니다^^