background-attachment
Determines how background image moves with scrolling. bgaf creates parallax, bgas is default.
Class List
| Class | CSS | Description |
|---|---|---|
bgaf | background-attachment: fixed | Background fixed to viewport (parallax effect) |
bgas | background-attachment: scroll | Background scrolls with element (default) |
bgal | background-attachment: local | Background scrolls with element content |
Usage Examples
<!-- Parallax hero section -->
<section class="bgaf bsc bgrn bgpc h50vh df jcc aic">
<h1>Parallax Hero</h1>
</section>
<!-- Scrollable area background -->
<div class="bgal bgrn bgpc oh h30rem oya">
<p>Background moves along when scrolling</p>
</div>Tips
Mobile caution
bgaf (fixed) doesn't work properly on iOS Safari. Normal scroll is safer on mobile.