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-bar-400 d-p-200 d-w100p d-h-350 d-bgr-none d-bgs-cover d-bga-scroll d-w100p d-of-auto" style="background-image: url('/assets/images/dp-sample-gradient.png')"> <dt-stack gap="100" class="d-fc-neutral-white"> <p>Curved rhythms often accompany lateral decisions, especially when considering the abstract potential of non-specific alignments. While typically unnoticed, these gentle shifts can accumulate meaning when framed in a context that remains undefined.</p> <p>Momentum builds where it doesn't, anchoring intent to unmeasured goals. As frameworks iterate without resolution, the pattern repeats—not identically, but recognizably. Every nuance appears significant until it drifts, leaving behind the shape of intent without its content. That distinction matters only when observation persists without anchoring.</p> <p>Transitions feel deliberate, though no threshold is ever clearly crossed. Echoes outlast their origin, and yet no moment stands alone when layered against ambient expectation.</p> <p>Nothing hinges on timing, yet sequences unfold as if they do. Loops stretch toward closure that neither confirms nor denies their purpose.</p> <p>With each cycle, the presence of form replaces the need for structure. In this way, absence becomes a container—soft-edged, indefinite, and quietly complete.</p> <p>Texture emerges where contrast flattens, offering a sense of motion without direction. The perception of clarity is merely a rhythm of proximity, not a function of definition.</p> <p>Eventually, what remains is not a resolution but a sustained pause—just enough to suggest continuity while withholding the terms of return.</p> </dt-stack> </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-bar-400 d-p-200 d-w100p d-h-350 d-bgr-none d-bgs-cover d-bga-fixed d-w100p d-of-auto" style="background-image: url('/assets/images/dp-sample-gradient.png')"> <dt-stack gap="100" class="d-fc-neutral-white"> <p>Curved rhythms often accompany lateral decisions, especially when considering the abstract potential of non-specific alignments. While typically unnoticed, these gentle shifts can accumulate meaning when framed in a context that remains undefined.</p> <p>Momentum builds where it doesn't, anchoring intent to unmeasured goals. As frameworks iterate without resolution, the pattern repeats—not identically, but recognizably. Every nuance appears significant until it drifts, leaving behind the shape of intent without its content. That distinction matters only when observation persists without anchoring.</p> <p>Transitions feel deliberate, though no threshold is ever clearly crossed. Echoes outlast their origin, and yet no moment stands alone when layered against ambient expectation.</p> <p>Nothing hinges on timing, yet sequences unfold as if they do. Loops stretch toward closure that neither confirms nor denies their purpose.</p> <p>With each cycle, the presence of form replaces the need for structure. In this way, absence becomes a container—soft-edged, indefinite, and quietly complete.</p> <p>Texture emerges where contrast flattens, offering a sense of motion without direction. The perception of clarity is merely a rhythm of proximity, not a function of definition.</p> <p>Eventually, what remains is not a resolution but a sustained pause—just enough to suggest continuity while withholding the terms of return.</p> </dt-stack> </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-bar-400 d-p-200 d-w100p d-h-350 d-bgr-none d-bgs-cover d-bga-local d-w100p d-of-auto" style="background-image: url('/assets/images/dp-sample-gradient.png')"> <dt-stack gap="100" class="d-fc-neutral-white"> <p>Curved rhythms often accompany lateral decisions, especially when considering the abstract potential of non-specific alignments. While typically unnoticed, these gentle shifts can accumulate meaning when framed in a context that remains undefined.</p> <p>Momentum builds where it doesn't, anchoring intent to unmeasured goals. As frameworks iterate without resolution, the pattern repeats—not identically, but recognizably. Every nuance appears significant until it drifts, leaving behind the shape of intent without its content. That distinction matters only when observation persists without anchoring.</p> <p>Transitions feel deliberate, though no threshold is ever clearly crossed. Echoes outlast their origin, and yet no moment stands alone when layered against ambient expectation.</p> <p>Nothing hinges on timing, yet sequences unfold as if they do. Loops stretch toward closure that neither confirms nor denies their purpose.</p> <p>With each cycle, the presence of form replaces the need for structure. In this way, absence becomes a container—soft-edged, indefinite, and quietly complete.</p> <p>Texture emerges where contrast flattens, offering a sense of motion without direction. The perception of clarity is merely a rhythm of proximity, not a function of definition.</p> <p>Eventually, what remains is not a resolution but a sustained pause—just enough to suggest continuity while withholding the terms of return.</p> </dt-stack> </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; |