background-attachment
Decides what a background image is anchored to: the element's own box (scroll), the element's scrolling content (local), or the viewport (fixed). bgaf creates parallax, bgas is the default.
Class List
| Class | CSS | Description |
|---|---|---|
bgaf | background-attachment: fixed | Background fixed to the viewport (parallax effect) |
bgas | background-attachment: scroll | Background fixed to the element box (default) |
bgal | background-attachment: local | Background travels with the element's scrolling content |
Live Demo
Both boxes have the same gradient and the same size and differ by exactly one class. Scroll inside each one with a wheel or trackpad.
scroll — bgas
The background is pinned to the box, so the gradient never moves.
local — bgal
The background travels with the content, so the color shifts as you scroll.
<!-- 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>Class Details
bgasbackground-attachment: scroll
The default. The background is anchored to the element's own box, so scrolling inside the element does not move it. The name is misleading: scroll means it scrolls together with the page, not that it follows inner scrolling.
<!-- 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
Anchors the background to the element's scrollable content instead, so it slides away as you scroll inside. The positioning area grows to the full scrollable size, which means gradients and bsc can look much larger than expected.
<!-- 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>This value only means something on a scroll container
If the element does not scroll internally, local and scroll render identically. Use it only where overflow is auto or scroll.
bgafbackground-attachment: fixed
Anchors the background to the viewport. As the page scrolls, the content moves past while the background stays put, which reads as parallax. Leave the box below on screen and scroll the page.
<!-- Parallax hero section -->
<section class="bgaf bsc bgrn bgpc h50vh df jcc aic">
<h1>Parallax Hero</h1>
</section>Practical Example
<!-- Parallax hero section -->
<section class="bgaf bsc bgrn bgpc h50vh df jcc aic">
<h1>Parallax Hero</h1>
</section>The usual production pattern is to enable parallax on desktop only and fall back on mobile.
<!-- 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>Tips and Pitfalls
Mobile caution
bgaf (fixed) is effectively broken on iOS Safari. The background jumps as the address bar collapses and expands, or it simply stretches and refuses to stay put. Falling back with sm-bgas on small screens is the safe move.
fixed also changes what background sizing is relative to
With fixed, background position and size resolve against the viewport rather than the element. bsc therefore covers the whole screen, and a small element shows only a crop of the image.
fixed is expensive to scroll
A fixed background forces a large repaint on every scroll frame and stutters noticeably on low-end devices. Never put several of them on one page.
It stops working inside a transformed or filtered ancestor
If any ancestor has transform, filter, backdrop-filter, or will-change, it creates a new containing block and the fixed background anchors to that ancestor instead of the viewport. This is almost always the reason a parallax section suddenly stops working.