The background-attachment property controls how a background image moves when the page or an element scrolls. It is especially useful for hero sections, parallax-style layouts, and scrollable panels.
Control background movement.
scroll, fixed, or local.
Viewport-locked backgrounds.
Normal page scrolling.
Inner overflow scrolling.
Part of background CSS.
The background-attachment CSS property sets whether a background image scrolls with its element, stays fixed relative to the viewport, or scrolls with the element’s own overflow content.
This property is commonly used with background-image to create fixed hero banners, layered page designs, and scrollable note areas where the background should move with inner text.
If you do nothing, backgrounds use scroll by default. Use fixed only when you intentionally want a viewport-locked background effect.
Apply background-attachment to any element that has a background image or gradient:
selector {
background-attachment: scroll | fixed | local;
}.hero {
background-image: url("hero.jpg");
background-size: cover;
background-attachment: fixed;
}scroll, fixed, and local.scroll.background-image or gradients.fixed is relative to the viewport, not the element itself.local is most noticeable inside elements with overflow: auto or overflow: scroll.| Question | Answer |
|---|---|
| Initial value | scroll |
| Applies to | Background images and gradients |
| Inherited | No |
| Animatable | No |
| Common use | Hero banners, parallax sections, scrollable panels |
The initial value of background-attachment is scroll. That means the background image moves with the element’s border box as the page scrolls, which is the normal behavior most layouts expect.
There are three keyword values for background-attachment.
| Value | Example | Meaning |
|---|---|---|
scroll | background-attachment: scroll; | The background scrolls with the element on the page |
fixed | background-attachment: fixed; | The background stays fixed relative to the viewport |
local | background-attachment: local; | The background scrolls with the element’s inner overflow content |
scrollThe default behavior. The background moves normally with the element when the page scrolls.
Stripes move with the box when you scroll the page.
Best for standard sections and full-page backgrounds.
fixedKeeps the background anchored to the viewport for hero and parallax-style effects.
Stripes stay pinned to the screen while the box moves.
Popular for landing-page hero banners.
localThe background scrolls with content inside a box that has its own scrollbar.
Useful for notes, chat windows, and inner panels.
Scroll this page slowly. The left panel keeps its stripes aligned with the box. The right panel keeps stripes fixed to the viewport, so the pattern appears to slide inside the box.
↓ Scroll the page to compare both panels
scroll: background moves with the element. fixed: background stays locked to the browser window.
scroll — Default page sections, cards, and normal background images.fixed — Hero headers, full-width banners, and parallax-style visual effects.local — Scrollable containers such as note panels, code blocks, or chat areas.scroll vs fixed vs local| Value | Moves with | Best for |
|---|---|---|
scroll | The element on the page | Standard layouts and section backgrounds |
fixed | The viewport | Hero images and parallax-style designs |
local | The element’s inner scrollable content | Overflow boxes and nested scroll areas |
Use the side-by-side panels above in the Property Values section, or try this full-width fixed hero while scrolling the page:
The gradient stays viewport-fixed while the rest of the page scrolls.
Compare this hero with the scroll vs fixed panels to see how attachment changes background motion.
Try background-attachment with all three values, a fixed hero, a local scroll box, and default scroll sections.
Compare scroll, fixed, and local to understand how each one behaves.
Demonstrate all three keyword values in one page.
.scroll { background-attachment: scroll; }
.fixed { background-attachment: fixed; }
.local { background-attachment: local; }Each box uses the same kind of background image but a different attachment rule, which changes how the background moves during scrolling.
Create a viewport-fixed hero section that feels layered as content scrolls over it.
.hero {
background-image: url("hero.jpg");
background-size: cover;
background-attachment: fixed;
}With fixed, the hero background stays in place while later page content scrolls above it.
Use local and default scroll for nested and standard layout behavior.
Make the background move with text inside an overflow container.
.notes {
overflow: auto;
background-image: linear-gradient(180deg, #dbeafe, #ede9fe);
background-attachment: local;
}local is most useful when the element itself scrolls internally, not just when the whole page scrolls.
Use the default behavior for normal full-page section backgrounds.
.section {
background-image: linear-gradient(135deg, #0d9488, #2563eb);
background-attachment: scroll;
background-size: cover;
}Because scroll is the default, you often do not need to write it unless you are overriding another value.
background-attachment WorksSet a photo, pattern, or gradient with background-image.
Pick scroll, fixed, or local.
The background either follows the page, stays in the viewport, or scrolls inside the element.
You get the scroll effect you want without changing the image itself.
background-attachment is widely supported, but fixed can behave differently on some mobile browsers.
Chrome, Firefox, Safari, Edge, and Opera all support scroll, fixed, and local.
Some mobile browsers treat background-attachment: fixed like scroll for performance reasons.
Bottom line: Use background-attachment confidently, but test fixed layouts on mobile and provide a graceful fallback.
The background-attachment property gives you control over how background images move during scrolling. Use scroll for normal layouts, fixed for hero and parallax-style designs, and local for inner scroll containers.
Understanding these three values helps you choose the right background behavior without extra JavaScript or complicated workarounds.
scroll for most standard page sectionsfixed with background-size: cover on hero bannerslocal in overflow containers like notes and chat panelsfixed will look identical on every mobile browserfixed everywhere without a performance reasonscroll is already the defaultlocal to matter without inner scrolling contentbackground-attachmentUse these points when choosing background scroll behavior.
Sets background movement.
Purposescroll, fixed, local.
ValuesViewport-locked backgrounds.
Use caseNormal page behavior.
DefaultFixed may differ on iOS.
CautionOpen the HTML editor, try background-attachment: fixed, and compare it with scroll and local.
5 people found this page helpful