CSS / Reference / background-attachment: Viewport, Box, and Internal Scroll Attachment

background-attachment determines whether a background is attached to the viewport, the element’s box, or its scrolling content. scroll and local differ during internal scrolling even if ordinary page scrolling looks similar.

Syntax and value choices

Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.

.panel { overflow: auto; background-attachment: local; }
.hero { background-attachment: fixed; }

For supported values and conditions, see MDN background-attachment.

Run the example and compare results

Save this complete code as css-reference-10576-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>background-attachment comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 240px; height: 150px; border: 12px dashed #718096; padding: 20px; background-color: #eaf2f8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Crect width='160' height='80' fill='%23006c9c'/%3E%3Ccircle cx='40' cy='40' r='24' fill='%23ffd166'/%3E%3C/svg%3E"); background-repeat: no-repeat; }
.target, .reference { height: 150px; overflow: auto; background-repeat: repeat-y; background-size: 160px 80px; }
.target { background-attachment: local; }
.reference { background-attachment: scroll; }
.spacer { height: 400px; }

/* Keep the practice box within a narrow viewport. */
.target, .reference { max-width: calc(100vw - 48px - 64px); }
</style>
</head>
<body>
<main id="demo">
<h1>background-attachment comparison</h1>
<section class="samples"><div class="a"><p class="label">local: scroll inside</p><div class="target"><div class="spacer">Scroll inside to inspect background movement.</div></div></div><div class="b"><p class="label">scroll: scroll inside</p><div class="reference"><div class="spacer">Scroll inside to inspect background movement.</div></div></div></section>
</main>
</body>
</html>

Scroll inside both boxes. The local background moves with the content; the scroll background remains attached to its element’s box.

Page scrolling versus internal scrolling

A scroll background still moves with the element as the page scrolls. “Fixed to the box” does not mean fixed to the entire screen. A fixed background uses viewport-related positioning, while transforms and browser behavior can affect its handling.

Mobile behavior and rendering cost

Test fixed backgrounds in the actual target browsers and provide a scroll alternative where appropriate. Do not assume mobile behavior or performance matches a desktop. Attachment can also affect how background size and position are resolved.

Compare fixed and scroll during page scrolling

Save this complete document as css-reference-10576-practice.html in UTF-8 and open it in a browser. Test it as a separate file rather than nesting it inside another example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Compare fixed and scroll during page scrolling</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
body { min-height:1500px; } .panel { height:180px; margin-block:24px; background-image:linear-gradient(#006c9c 0 80px,#ffd166 80px 160px,#e6f2ff 160px); background-size:100% 240px; background-repeat:repeat-y; } .fixed { background-attachment:fixed; }
  </style>
</head>
<body>
<main>
  <h1>Compare fixed and scroll during page scrolling</h1>
<p>scroll</p><div class="panel"></div><p>fixed</p><div class="panel fixed"></div><p>Scroll the page itself up and down.</p>
</main>
</body>
</html>

The scroll background moves with its element; fixed uses a viewport-fixed reference. This differs from scrolling inside the earlier boxes. Change only .fixed to scroll and restore it after comparing. Check fixed behavior separately on target mobile browsers.

For combining background properties in one practical design, see CSS Background Colors and Images: cover and contain. Related properties to compare alongside these conditions are overflow.

When the result is missing or unexpected

• Make sure a constrained height and overflow create an internal scroll area.
• Compare without fixed or a large complex image when scrolling is choppy.