Background Attachment

Utilities for controlling the way an element's background image position is fixed within the viewport or scrolls with its containing block.

Scroll

This is the default behavior. Use d-bga-scroll to fix the background image to the element. It does not scroll with its content.


<div class="... d-bga-scroll">...</div>

Fixed

Use d-bga-fixed to fix the background image to the viewport. The background image does not scroll with the content.


<div class="... d-bga-fixed">...</div>

Local

Use d-bga-local to fix background image relative to the element's contents. If the element is scrollable, the background scrolls with the element's contents, and background area and positioning are relative to the scrollable area of the element rather than the viewable box.


<div class="... d-bga-local">...</div>

Classes

Class
Output
.d-bga-unset background-attachment: unset !important;
.d-bga-scroll background-attachment: scroll !important;
.d-bga-fixed background-attachment: fixed !important;
.d-bga-local background-attachment: local !important;
Background Attachment documentation last updated Thursday, June 11, 2026