Background Attachment

Class	Style
ba-f	background-attachment: fixed;
ba-l	background-attachment: local;
ba-s	background-attachment: scroll;

Scroll

Initial value

The image will move with the content of the page.

Try scrolling through the image to see how it behaves.

Hi, Anne. It's finally springtime here on earth! I can't stand windy or cold days...

<div class="o-auto ai-c ba-s bp-c bs-c d-f ff-c fs-i h-40 jc-c p-8 rad-2 ta-c tc-white w-84" style="background-image: url(/img/frangipani.jpg);">
  <h1 class="bf-b-md fs-xl fw-700 px-4 py-2 rad-2">Hi, Anne. It's finally springtime here on earth! I can't stand windy or cold days...</h1>
</div>

Fixed

The image will not move when the content is scrolled.

Try scrolling through the image to see how it behaves.

<div class="o-auto ai-c ba-f d-f ff-c fs-i h-40 jc-c p-8 rad-2 ta-c tc-white w-84" style="background-image: url(/img/frangipani.jpg);">
  <h1 class="bf-b-md fs-xl fw-700 px-4 py-2 rad-2">Hi, Anne. It's finally springtime here on earth! I can't stand windy or cold days...</h1>
</div>

Local

The image will scroll with the content of the element.

Try scrolling through the image to see how it behaves.

Hi, Anne. It's finally springtime here on earth! I can't stand windy or cold days...

<div class="o-auto ai-c ba-l bp-c bs-c d-f ff-c fs-i h-40 jc-c p-8 rad-2 ta-c tc-white w-84" style="background-image: url(/img/frangipani.jpg);">
  <h1 class="bf-b-md fs-xl fw-700 px-4 py-2 rad-2">Hi, Anne. It's finally springtime here on earth! I can't stand windy or cold days...</h1>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Breakpoint variant

You can combine responsive breakpoints like sm:ba-*,md:ba-*, lg:ba-*, and xxl:ba-* allows targeting specific utilities in different viewports.

<div class="ba-f md:ba-s ..."></div>

Hover variant

Alternatively, you can apply :hover by using h:ba-* utility to override elements and change their values when hovering over them.

<div class="ba-f h:ba-s ..."></div>