背景附著方式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-fixed bg-cover">...</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="bg-local overflow:auto">...</div>

Apply conditionally

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

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

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