CSS background-attachment Property

Description

The background-attachment property in CSS controls the behavior of a background image with respect to the viewport and the element it is applied to. By default, a background image scrolls along with the content of an element. However, background-attachment allows developers to modify this behavior, giving them the flexibility to create visual effects where the background either remains fixed while the content moves or scrolls in relation to its container. This can be particularly useful for achieving depth and layering effects in web design, such as parallax scrolling or fixed hero sections.

When using background-attachment, the property interacts closely with background-position, which determines the starting point of the image, and background-repeat, which controls whether the image is repeated or tiled. For instance, a fixed background can create a sense of stability behind a scrolling element, but care must be taken to ensure the image aligns properly, especially if it is repeated. Designers often pair background-attachment with responsive considerations to ensure that the fixed image does not create awkward gaps or overflow issues on different screen sizes.

Beyond static layouts, background-attachment can also enhance interactive and dynamic designs. For example, combining it with background-size allows designers to scale the background image while maintaining a fixed position, creating visually engaging effects without the need for complex JavaScript. Additionally, using this property thoughtfully can improve user experience by subtly directing attention, creating visual hierarchy, or emphasizing content sections. Despite its simplicity, background-attachment is a versatile tool for adding depth and polish to modern web pages.

Definition

Initial value: scroll
Applies to: All elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.backgroundAttachment

Interactive Demo

background-attachment: scroll;

background-attachment: fixed;
background-position: center right;

background-attachment: local;

background-attachment: local, scroll;

background-attachment: scroll, local;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

background-attachment: <attachment> [ , <attachment> ]*

Values

<attachment> = scroll | fixed | local

scrollBackground image scrolls with the object as the document is scrolled.
fixedBackground image will not scroll with its containing element, instead remaining stationary within the viewport.
localBackground image will not scroll with its containing element, but will scroll when the element's content scrolls: it is fixed regarding the element's content.
inherit

Example

HTML

<div class='container'>

  <h1>CSS background-attachment examples</h1>



  <div class='panel scroll'>

    <h2>background-attachment: scroll</h2>

    <p>This panel uses background-attachment: scroll. The background moves with the element when the page scrolls.</p>

    <p>Scroll the page to observe the background behavior.</p>

    <p>Additional content to lengthen the page for scrolling demonstration.</p>

  </div>



  <div class='panel fixed'>

    <h2>background-attachment: fixed</h2>

    <p>This panel uses background-attachment: fixed. The background is fixed relative to the viewport.</p>

    <p>Scroll the page to see the panel content move while the background stays put.</p>

  </div>



  <div class='panel local'>

    <h2>background-attachment: local</h2>

    <div class='local-content'>

      <p>This panel uses background-attachment: local. The background moves with the element's content when you scroll inside the element.</p>

      <p>Use the internal scrollbar to see the background shift with the content.</p>

      <p>Line 1</p>

      <p>Line 2</p>

      <p>Line 3</p>

      <p>Line 4</p>

      <p>Line 5</p>

      <p>Line 6</p>

      <p>Line 7</p>

      <p>Line 8</p>

      <p>Line 9</p>

      <p>Line 10</p>

    </div>

  </div>

</div>

CSS

/* Page basics */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  line-height: 1.4;
  background: #f3f4f6;
  color: #111827;
}

.container {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 24px;
}

/* Shared panel styling */
.panel {
  color: #fff;
  border-radius: 10px;
  margin-bottom: 30px;
  padding: 20px;
  background-image: url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1400&q=80');
  background-size: cover;
  background-position: center;
  min-height: 240px;
  box-shadow: 0 8px 24px rgba(2,6,23,0.2);
}

.panel h2 {
  margin-top: 0;
  background: rgba(0,0,0,0.4);
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
}

.panel p {
  margin: 12px 0;
  background: rgba(0,0,0,0.25);
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
}

/* Specific background-attachment examples */
.panel.scroll {
  /* default behavior: background scrolls with the element */
  background-attachment: scroll;
}

.panel.fixed {
  /* background is fixed relative to the viewport */
  background-attachment: fixed;
}

.panel.local {
  /* background moves with the element's content when the element is scrolled */
  background-attachment: local;
  overflow: auto; /* required to allow internal scrolling */
  height: 200px;  /* constrain height to demonstrate internal scroll */
}

.local-content p {
  display: block;
  background: rgba(0,0,0,0.18);
  padding: 6px 10px;
  border-radius: 4px;
  margin: 8px 0;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS background-attachment property. Hover over a browser icon to see the version that first introduced support for this CSS property.