background-attachment
배경 이미지가 스크롤에 따라 움직이는 방식을 결정합니다. bgaf는 패럴랙스(시차 스크롤) 효과를 만들고, bgas는 기본 동작입니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
bgaf | background-attachment: fixed | 배경이 뷰포트에 고정 (패럴랙스 효과) |
bgas | background-attachment: scroll | 배경이 요소와 함께 스크롤 (기본값) |
bgal | background-attachment: local | 배경이 요소의 콘텐츠와 함께 스크롤 |
사용 예시
<!-- 패럴랙스 히어로 섹션 -->
<section class="bgaf bsc bgrn bgpc h50vh df jcc aic">
<h1>Parallax Hero</h1>
</section>
<!-- 스크롤 가능한 영역의 배경 -->
<div class="bgal bgrn bgpc oh h30rem oya">
<p>스크롤하면 배경도 함께 움직입니다</p>
</div>팁
모바일 주의
bgaf(fixed)는 iOS Safari에서 제대로 동작하지 않습니다. 모바일에서는 패럴랙스 대신 일반 스크롤을 사용하는 것이 안전합니다.