CSS background-attachment Property

This property defines whether a background image stays fixed within the viewport or scrolls along with its containing block.

selector { background-attachment: value; }
scroll The background image is fixed relative to the element itself and does not scroll with its contents.
fixed The background image is fixed relative to the viewport, creating a parallax-like effect as content scrolls over it.
local The background image scrolls along with the element's local content when the element has a scrollbar.
initial Sets the property to its default value which is scroll.
inherit Inherits the background-attachment setting from its parent element.

Code Examples

A basic example showing a fixed background image inside a scrollable container.

<div style="height: 500px; overflow-y: scroll; background-image: url('https://www.adamkhoury.com/images/topic_css.png'); background-repeat: no-repeat; background-attachment: fixed; background-size: contain; border: 2px solid #333333;">
  <div style="height: 1000px; padding: 20px; color: #000000;">
    <h1>Scroll down to see the effect</h1>
    <p>The background image stays stuck to the viewport glass while this text moves.</p>
  </div>
</div>

An advanced example using JavaScript to dynamically toggle the background-attachment property between scroll and fixed.

<div id="hero" style="height: 400px; background-image: url('https://www.adamkhoury.com/images/topic_js.png'); background-attachment: scroll; background-position: center; background-repeat: no-repeat; background-color: #f0f0f0; transition: background-attachment 0.5s;">
  <button onclick="toggleAttachment()" style="margin: 20px; padding: 10px;">Toggle Fixed/Scroll</button>
</div>

<script>
function toggleAttachment() {
  const hero = document.getElementById("hero");
  const current = window.getComputedStyle(hero).backgroundAttachment;
  if (current === "scroll") {
    hero.style.backgroundAttachment = "fixed";
    alert("Now the background is fixed to the viewport.");
  } else {
    hero.style.setProperty("background-attachment", "scroll");
    alert("Now the background scrolls with the element.");
  }
}
</script>

Pro Tip

You can apply multiple background attachments if your element has multiple background images. Just comma-separate the values in the same order as your images. For example: "background-attachment: fixed, scroll;" applies fixed to the first image and scroll to the second.

Deep Dive

Think of the background-attachment property as the glue for your background images. When set to "scroll", the image is glued to the element; if the whole page moves, the image moves with the element. When set to "fixed", the image is glued to the glass of your monitor. Even as the web page content slides up and down, that image stays exactly where it is relative to the browser window. The "local" value is a bit more specific; it's used for elements that have their own internal scrollbars, like a div with "overflow: scroll". In that case, "local" glues the image to the actual content inside the div, so the image travels with the text as you scroll within that specific box.

Best Practices

Use "fixed" to create simple parallax effects that add depth to your layout without the need for heavy JavaScript libraries. However, always pair it with "background-size: cover" to ensure the image fills the viewport properly. If you are designing for mobile-first, keep in mind that "fixed" can be heavy on system resources, so use it sparingly on pages with massive amounts of content.

Common Pitfalls

The biggest headache is mobile support. Many mobile browsers, specifically Safari on iOS, have historically struggled with "background-attachment: fixed". Often, the browser will simply ignore the fixed command and treat it as "scroll" to save on processing power and battery. Another thing to watch out for is that when you use "fixed", the "background-position" property becomes relative to the viewport, not the element it is sitting in.

Accessibility

Background images that stay fixed while text scrolls over them can cause readability issues if the image has a lot of high-contrast detail. It is a good idea to use a semi-transparent background color on your text containers to ensure the words don't get lost in the image. Also, some users are sensitive to the perceived motion of parallax scrolling, which can cause dizziness or nausea.

Dev Data Table: background-attachment property

default scroll
animatable no
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.backgroundAttachment = "fixed";
js_syntax_2 element.style.setProperty("background-attachment", "fixed");
js_note In JavaScript, use camelCase backgroundAttachment when accessing the style object directly.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10.1 }
results render here...