background-attachment

Setting whether position of background image is fixed when scrolling.

Overview

Examples

Scroll with the element

Use bg-scroll for the normal background attachment behavior.

<section class="bg-scroll">...</section>

@layer utilities {  .bg-scroll {    background-attachment: scroll  }}

Fix a background to the viewport

Use bg-fixed when the background should stay fixed relative to the viewport.

<section class="bg-cover bg-fixed">...</section>

Fixed backgrounds can behave differently on mobile browsers. Keep the effect decorative and verify it on target devices.

Attach to scrollable content

Use bg-local when the background should scroll with the element's contents.

<div class="overflow:auto bg-local">...</div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="bg-scroll bg-scroll@print bg-fixed@lg">...</div>

Use motion and contrast carefully when fixed backgrounds sit behind text.