Background Attachment

Controls how the background responds to scrolling.

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.

<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.

<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>

Using utility variants

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

Using media queries

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

Using hover states

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