1. Web
  2. CSS
  3. Reference
  4. Properties
  5. background-attachment

background-attachment

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.

Try it

background-attachment: scroll;

background-attachment: fixed;

background-attachment: local;

background-attachment: fixed, scroll;

background-attachment: scroll, fixed;

<section id="default-example">
  <div id="example-element">
    <p>
      From there to here<br />
      from here to there,<br />
      Funny things<br />
      Are everywhere.
    </p>
    <p>--Dr. Seuss</p>
  </div>
</section>

body {
  overflow: scroll;
}

#default-example {
  height: 600px;
}

#example-element {
  max-width: 20rem;
  height: 100%;
  background:
    url("/shared-assets/images/examples/lizard.png") right 3rem top 1rem / 15rem
      no-repeat,
    url("/shared-assets/images/examples/moon.jpg") center / 10rem;
  font-size: 1.2rem;
  font-weight: bolder;
  overflow: auto;
  padding: 20px;
  color: red;
  text-shadow:
    0 0 0.5rem black,
    0 0 0.5rem black;
}

Syntax

css
/* Keyword values */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* Global values */
background-attachment: inherit;
background-attachment: initial;
background-attachment: revert;
background-attachment: revert-layer;
background-attachment: unset;

The background-attachment property is specified as one or more of the keyword values, separated by commas.

Values

fixed

The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the element. If set, the background-origin property is ignored.

local

The background is fixed relative to the element's contents. If the element has a scrolling mechanism, the background scrolls with the element's contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.

scroll

The background is fixed relative to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)

Formal definition

Initial valuescroll
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

background-attachment = 
  <attachment>#  

<attachment> = 
  scroll  |
  fixed   |
  local

Examples

Basic example

HTML

We include an unordered list (<ul>) with some list items ((<li>).

html
<ul>
  <li>One fish</li>
  <li>Two fish</li>
  <li>Red fish</li>
  <li>Blue fish</li>
  <li>Black fish</li>
  <li>Blue fish</li>
  <li>Old fish</li>
  <li>New fish.</li>
  <li>This one has a little star.</li>
  <li>This one has a little car.</li>
  <li>Say! What a lot</li>
  <li>Of fish there are.</li>
</ul>

CSS

We define a background-image and set the background-attachment to fixed. We also include a height, width, and overflow to ensure the element scrolls.

css
ul {
  background-image: url("star-solid.gif");
  background-attachment: fixed;

  width: 300px;
  height: 70px;
  overflow: scroll;
}

Result

Note how the background remains fixed relative to the list's viewport when you scroll the overflowing text into view.

Multiple background images

This property supports multiple background images. You can specify a different <attachment> for each background, separated by commas. Each image is matched with the corresponding <attachment> type, from first specified to last.

HTML

We include all of Dr. Suess's poem.

html
<div>
  <ul>
    <li>One fish</li>
    <li>Two fish</li>
    <li>Red fish</li>
    <li>Blue fish</li>
    <li>Black fish</li>
    <li>Blue fish</li>
    <li>Old fish</li>
    <li>New fish.</li>
    <li>This one has a little star.</li>
    <li>This one has a little car.</li>
    <li>Say! What a lot</li>
    <li>Of fish there are.</li>
    <li>Yes. Some are red. And some are blue.</li>
    <li>Some are old. And some are new.</li>
    <li>Some are sad.</li>
    <li>And some are glad.</li>
    <li>And some are very, very bad.</li>
    <li>Why are they</li>
    <li>Sad and glad and bad?</li>
    <li>I do not know.</li>
    <li>Go ask your dad.</li>
    <li>Some are thin.</li>
    <li>And some are fat.</li>
    <li>The fat one has</li>
    <li>A yellow hat.</li>
    <li>From there to here, from here to there,</li>
    <li>Funny things</li>
    <li>Are everywhere.</li>
  </ul>
  <p>--Dr. Seuss</p>
</div>

CSS

We include a height, width, and overflow on the parent <div> to ensure the contents scroll.

We define two comma-separated background images on the list, and set the background-attachment to fixed, scroll, meaning the first background image will be fixed and the second will scroll. We set the background-repeat to make both background images repeat vertically, separating them with the background-position property.

css
div {
  width: 300px;
  height: 200px;
  overflow: scroll;
}
ul {
  background-image: url("star-solid.gif"), url("star-transparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: repeat-y;
  background-position:
    0 0,
    100px 0;
}

Result

Note how the first background image is fixed to the viewport while the the second background image is fixed relative to the list.

Specifications

Specification
CSS Backgrounds and Borders Module Level 3
# background-attachment

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content