Background-attachment controls what a background is fixed to while scrolling. The local value ties it to the element's contents, so the background moves as that element scrolls. Scroll attaches it to the element's box, while fixed anchors it to the viewport; those three states are easy to confuse in nested scrollers.
Make this comfortable
CSS background-attachment local: move decoration with scrolled content
When to use it
An audit ledger contains a bounded scroll area with a subtle top-to-bottom tint that belongs to the list content. The tint should travel when an operator scrolls the ledger, while a visible border stays on the frame. Use local on that one scroller. Test with enough rows to overflow, keyboard scrolling, touch, a short list, and print output. If the design is really meant to keep a stationary texture behind rows, scroll may be the better value; observe the behavior before choosing. A fixed viewport background can behave differently or be costly on mobile browsers, so do not reach for fixed solely to make a desktop mockup look impressive. Keep text contrast independent of the gradient at every scroll position. The background is decoration, not a sign that a row was processed. Semantic record order and row status remain in HTML and application data.
.audit-ledger { max-block-size: 29rem; overflow-y: auto; border: 1px solid #78919d; background-image: linear-gradient(#e7f2f4, #fff); background-attachment: local; }
@media print { .audit-ledger { max-block-size: none; overflow: visible; background-image: none; } }Cost and verification
The gradient is small compared with an image download, but scrolling can still cause background repaint. Test on a low-end target device if the area is large or contains many composited children. A local background that changes color across the scrollable content may lower contrast behind rows midway through the list. Use a solid fallback color or row surfaces where necessary. The rule has no effect on a non-scrolling element that is too short to overflow, which can hide a mistaken design assumption during review. Avoid using background position as a substitute for scroll progress or audit state; CSS painting cannot validate a record.
Common Mistakes
- Do not confuse local attachment with viewport-fixed attachment.
- Do not test only a short list that never scrolls.
- Do not let a changing gradient reduce text contrast.
Connected lessons
css
reference
web