Sections

Background attachment

Utilities for controlling how a background image behaves when scrolling.

Class Properties
.bg-fixed background-attachment: fixed;
.bg-local background-attachment: local;
.bg-scroll background-attachment: scroll;

Usage

Fixed

Use .bg-fixed to fix the background image relative to the viewport.

<div class="bg-fixed bg-cover bg-center bg-gray-200"></div>

Local

Use .bg-local to scroll the background image with the container and the viewport.

<div class="bg-local bg-cover bg-center bg-gray-200"></div>

Scroll

Use .bg-scroll to scroll the background image with the viewport, but not with the container.

<div class="bg-scroll bg-cover bg-center bg-gray-200"></div>

Variants

By default, no responsive or hover-state variants are generated for background attachment utilities.

Responsive

To include responsive variants like .md:bg-fixed, add "background-attachment" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:

$responsive-variants: (
  // ...
  "background-attachment",
);

Hover-state

To include hover-state variants like .hover:bg-fixed, add "background-attachment" to the $hover-variants variable:

$hover-variants: (
  // ...
  "background-attachment",
);