background-attachment
배경 이미지를 무엇에 고정할지 정합니다. 요소 자신의 박스(scroll), 요소 안의 스크롤 콘텐츠(local), 뷰포트(fixed) 중 하나를 기준으로 삼습니다. bgaf는 패럴랙스, bgas는 기본 동작입니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
bgaf | background-attachment: fixed | 배경이 뷰포트에 고정 (패럴랙스 효과) |
bgas | background-attachment: scroll | 배경이 요소 박스에 고정 (기본값) |
bgal | background-attachment: local | 배경이 요소의 스크롤 콘텐츠와 함께 이동 |
시각 데모
두 상자는 그라데이션도 크기도 같고 클래스 하나만 다릅니다. 각 상자 안을 마우스 휠이나 트랙패드로 스크롤해 보세요.
scroll — bgas
배경이 상자에 붙어 있어 스크롤해도 그라데이션이 그대로입니다.
local — bgal
배경이 콘텐츠와 함께 밀려 올라가 색이 바뀝니다.
<!-- Same gradient, same scroll box, one keyword apart -->
<div class="w100p h20rem oya br8px bglg-to-b-38BDF8-FACC15 bgas">...</div>
<div class="w100p h20rem oya br8px bglg-to-b-38BDF8-FACC15 bgal">...</div>클래스별 상세
bgasbackground-attachment: scroll
기본값입니다. 배경은 요소 자신의 박스에 고정되므로, 요소 내부를 스크롤해도 배경은 움직이지 않습니다. 이름이 scroll이라 헷갈리지만 여기서 scroll은 페이지와 함께 스크롤된다는 뜻이지 내부 스크롤을 따라간다는 뜻이 아닙니다.
<!-- Default: the background is pinned to the element's own box -->
<div class="bgas bsc bgrn bgpc h30rem br8px oya">
<p>Scrolling inside does not move the backdrop.</p>
</div>bgalbackground-attachment: local
배경 기준을 요소의 스크롤 콘텐츠로 바꿉니다. 내부를 스크롤하면 배경도 같이 밀려납니다. 배경 영역이 넘치는 콘텐츠 전체 크기로 넓어지므로, 그라데이션이나 bsc를 쓰면 이미지가 크게 늘어나 보일 수 있습니다.
<!-- Chat log: the watermark travels with the messages -->
<div class="bgal bgrn bgpc oya h30rem br8px p2rem">
<p>Message 1</p>
<p>Message 2</p>
</div>이 값만 스크롤 컨테이너에서 의미가 있습니다
요소에 내부 스크롤이 없다면 local과 scroll의 결과는 완전히 같습니다. overflow가 auto나 scroll인 요소에만 쓰세요.
bgafbackground-attachment: fixed
배경을 뷰포트에 고정합니다. 페이지를 스크롤하면 콘텐츠만 지나가고 배경은 제자리에 남아 패럴랙스처럼 보입니다. 아래 상자를 두고 페이지를 스크롤해 보세요.
<!-- Parallax hero section -->
<section class="bgaf bsc bgrn bgpc h50vh df jcc aic">
<h1>Parallax Hero</h1>
</section>실전 예시
<!-- Parallax hero section -->
<section class="bgaf bsc bgrn bgpc h50vh df jcc aic">
<h1>Parallax Hero</h1>
</section>패럴랙스는 데스크톱에서만 켜고 모바일에서는 되돌리는 것이 실무 표준입니다.
<!-- Long-form article: full-bleed quote bands that hold still
while the text scrolls past them, with a mobile fallback -->
<article class="maxw72rem mxa">
<p class="fs16px lh1-8 c71717A">... intro paragraph ...</p>
<blockquote class="bgaf bsc bgpc h40rem df jcc aic p4rem my4rem sm-bgas">
<p class="fs2-8rem fw700 cFFFFFF tac">
Fixed backgrounds are a desktop-only flourish.
</p>
</blockquote>
<p class="fs16px lh1-8 c71717A">... rest of the article ...</p>
</article>팁 / 주의사항
모바일 주의
bgaf(fixed)는 iOS Safari에서 사실상 깨집니다. 주소창이 접히고 펴질 때 배경이 튀거나, 아예 고정되지 않고 늘어난 채로 멈춥니다. 모바일에서는 sm-bgas로 되돌리는 편이 안전합니다.
fixed는 배경 크기 기준도 바꿉니다
fixed에서 배경 위치와 크기의 기준은 요소가 아니라 뷰포트입니다. 따라서 bsc는 요소가 아니라 화면 전체를 덮도록 계산되고, 작은 요소에서는 이미지의 일부만 보입니다.
fixed는 스크롤 성능을 갉아먹습니다
고정 배경은 스크롤할 때마다 큰 영역을 다시 칠하게 만들어 저사양 기기에서 눈에 띄게 버벅입니다. 한 페이지에 여러 개를 쓰지 마세요.
transform이나 filter가 있는 조상 안에서는 무력화됩니다
조상 요소에 transform, filter, backdrop-filter, will-change가 걸려 있으면 새 containing block이 만들어져 fixed 배경이 뷰포트가 아니라 그 조상에 고정됩니다. 패럴랙스가 갑자기 동작하지 않는다면 대개 이 문제입니다.