Background Attachment

Utility	Properties
ba-f	background-attachment: fixed;
ba-l	background-attachment: local;
ba-s	background-attachment: scroll;

Fixed

This example sets the image to 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('https://picsum.photos/600/400?image=106');">
  <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

This example sets the image to 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('https://picsum.photos/600/400?image=106');">
  <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>

Scroll

Initial value

This example sets the image to scroll. 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('https://picsum.photos/600/400?image=106');">
  <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.

Media modifier

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

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

Hover modifier

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

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