background-attachment CSS property
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
/* 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-originproperty 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 value | scroll |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
background-attachment =
<attachment>#
<attachment> =
scroll |
fixed |
local
Examples
Basic example
HTML
We include an unordered list (<ul>) with some list items ((<li>).
<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.
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. Seuss's poem.
<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.
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 second background image is fixed relative to the list.
Specifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-attachment |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
background-attachment
|
|
|
|
|
|
|
|
|
|
|
|
|
fixed
|
|
|
|
|
|
|
|
|
|
|
|
|
local
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Multiple backgrounds
|
|
|
|
|
|
|
|
|
|
|
|
|
scroll
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Has more compatibility info.