-
스크롤 해도 배경 이미지는 고정하기(background-attachment)Dev/CSS 2023. 5. 20. 22:07반응형
전체 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; // 예상되는 변화에 관한 힌트를 브라우저에 제공하여 실제 요소가 변화되기 전에 미리 브라우저는 적절하게 최적화. }
css를 사용할 때, 내가 몰랐던 속성을 사용하기 전에는 아래의 레퍼런스들을 참고하고 개발해야겠다.
반응형'Dev > CSS' 카테고리의 다른 글
원하는 태그 크기 확대/축소 하기(zoom) (0) 2023.05.27