background-attachment
Attaching a background to the element, scrollable content or viewport.
Overview
| Class | Declarations |
|---|---|
bg-fixed | background-attachment: fixed;
|
bg-local | background-attachment: local;
|
bg-scroll | background-attachment: scroll;
|
background-attachment:<value> | background-attachment: <value>;
|
Examples
Scroll with the element
bg-scroll attaches the background to the element’s box. Scroll inside the panel: its text moves while the artwork stays at the same place in the panel. Scroll the preview page and the whole panel moves together.
<!-- Element box · scroll attachment --><body class="min-h:720px"> <section id="target" tabindex="0" aria-label="Scrollable background specimen" class="overflow:auto h:220px w-xs max-w:100% p-md b:1px|solid|var(--color-line-base) bg-repeat-y bg-scroll background-position:50%|0 background-size:320px|200px background-image:url(/demo/landscape.svg)"> <div class="flex flex-col items-start justify-between h:480px"> <p class="m:0 p-xs bg-surface-base text-body">Start of content</p> <p class="m:0 p-xs bg-surface-base text-body">End of content</p> </div> </section> <p class="mt-md font-sm text-muted">Scroll this page as well as the inner panel.</p></body>Generated CSS
@layer utilities { .bg-scroll { background-attachment: scroll }}Fix a background to the viewport
bg-fixed positions the image against the viewport while the element still clips its paint. Scroll the preview page to move the panel across the stationary artwork.
<!-- Iframe viewport · fixed attachment --><body class="min-h:720px"> <section id="target" tabindex="0" aria-label="Scrollable background specimen" class="overflow:auto h:220px w-xs max-w:100% p-md b:1px|solid|var(--color-line-base) bg-fixed bg-repeat-y background-position:50%|0 background-size:320px|200px background-image:url(/demo/landscape.svg)"> <div class="flex flex-col items-start justify-between h:480px"> <p class="m:0 p-xs bg-surface-base text-body">Start of content</p> <p class="m:0 p-xs bg-surface-base text-body">End of content</p> </div> </section> <p class="mt-md font-sm text-muted">Scroll this page as well as the inner panel.</p></body>This preview uses its own real iframe viewport. Fixed backgrounds can behave differently on mobile devices; verify the effect on the browsers and hardware you target. Keep the effect decorative and give text an opaque surface.
Attach to scrollable content
bg-local attaches the image to the element’s scrollable content. Focus the panel and use the arrow keys: the artwork and text move through the panel together.
<!-- Scrollable content · local attachment --><body class="min-h:720px"> <section id="target" tabindex="0" aria-label="Scrollable background specimen" class="overflow:auto h:220px w-xs max-w:100% p-md b:1px|solid|var(--color-line-base) bg-local bg-repeat-y background-position:50%|0 background-size:320px|200px background-image:url(/demo/landscape.svg)"> <div class="flex flex-col items-start justify-between h:480px"> <p class="m:0 p-xs bg-surface-base text-body">Start of content</p> <p class="m:0 p-xs bg-surface-base text-body">End of content</p> </div> </section> <p class="mt-md font-sm text-muted">Scroll this page as well as the inner panel.</p></body>Compare this with bg-scroll, where inner scrolling moves only the content. The explicit 480px content height creates real overflow; the image size stays the same in both examples.
Apply conditionally
The panel uses local attachment on narrow screens and fixed attachment from sm. Resize the actual iframe, then compare inner-panel and preview-page scrolling. Print returns to scroll attachment.
<!-- Local → fixed at sm --><body class="min-h:720px"> <section id="target" tabindex="0" aria-label="Scrollable background specimen" class="overflow:auto h:220px w-xs max-w:100% p-md b:1px|solid|var(--color-line-base) bg-local bg-repeat-y background-position:50%|0 background-size:320px|200px background-image:url(/demo/landscape.svg) bg-scroll@print bg-fixed@screen@sm"> <div class="flex flex-col items-start justify-between h:480px"> <p class="m:0 p-xs bg-surface-base text-body">Start of content</p> <p class="m:0 p-xs bg-surface-base text-body">End of content</p> </div> </section> <p class="mt-md font-sm text-muted">Scroll this page as well as the inner panel.</p></body>The preview does not simulate attachment with transforms or inline positions. Mobile support may limit how fixed backgrounds paint even when the computed keyword is fixed.