Manuales 
background-attachment 5z4q5j
The background-attachment property is used to specify whether a background image is fixed relative to the viewport, or scrolls along with the element or its content. 3d2e1g
Multiple attachment keywords can be used when multiple background images are used. The values are then comma-separated, and each value is applied to a corresponding background image (first value for the first image, second value for the second image, and so on).
There is only one viewport in a view. And there is no viewport in paged media (print), so if an image is fixed, it is fixed with respect to the page box and therefore replicated on every page.
When an element’s background image is set to be fixed relative to the viewport, it will be fixed so that even if the element has scrollable content inside it (as in the examples below), the background will remain fixed and will not scroll with the element or its content.
Also, even if the image is fixed, it is still only visible when it is in the background painting area of the element or otherwise unclipped (see the background-repeat property for more information). Thus, unless the image is tiled, it may be invisible inside the element. A lot of websites use fixed images to create a nice scrolling effect on a page: the background image is fixed relative to the viewport, and it is first visible inside the element, and as soon as the starts scrolling, the element scrolls up/down but the background image stays in its fixed position, so at some point, the element will reach a position where its background image is no longer visible inside of it, because it’s not in the element’s background painting area anymore. See the live demo below for an example.
Official Syntax 55184y
- Syntax:
background-attachment: scroll | fixed | local
- Initial: scroll
- Applies To: all elements
- Animatable: no
Values 584j31
- scroll
- This is the default value. The background is fixed relative to the element itself and does not scroll with its content. It is effectively attached to the element’s border.
- fixed
-
The background is fixed relative to the viewport. In paged media where there is no viewport, a ‘fixed’ background is fixed with respect to the page box and therefore replicated on every page. Note that there is only one viewport per view. Even if an element has scrollable content, a ‘fixed’ background doesn’t move with the element or its content.
Even if the image is fixed, it is still only visible when it is in the background painting area of the element or otherwise unclipped. (See the background-repeat property for more information.) Thus, unless the image is tiled, it may be invisible inside the element. See the live demo below for an example.
- local
- The background is fixed relative to the element’s content: if the content inside the element is scrollable, the background scrolls with the element’s content.
Notes z5jo
If a browser does not fixed backgrounds (for example, due to limitations of the hardware platform) it should ignore declarations with the keyword fixed. In that case, a background attachment is declared for non-ing browsers, and then another declaration follows for browsers that do it. You can see an example for this below.
Examples 3e5p5z
The following example will fix the background image of an element relative to the viewport. A scroll attachment is declared first for browsers that don’t the fixed value.
.element {
background-image: url(paper.png);
/* For non-ing browsers */
background-attachment: scroll;
/* For browsers that do fixed backgrounds: */
background-attachment: fixed;
}
The following example will set two background images to an element (see background-image), and then it will fix one relative to the element, and the second one relative to the content so that it scrolls with the content.
.element {
background-image: url(path/to/my/image.jpg), url(path/to/second/image.png);
background-attachment: scroll, local;
}
This example creates an infinite vertical band that remains “glued” to the viewport when the element is scrolled.
body {
background-image: url("pendant.png");
background-repeat: repeat-y; /* repeat the image vertically only */
background-attachment: fixed;
}
Live Demo 2x4j2k
View this demo on the Codrops PlaygroundFor an example of the fixed background attachment value, check out this demo:
Browser k5t66
CSS background-attachment i2m4g
Method of defining how a background image is attached to a scrollable element. Values include `scroll` (default), `fixed` and `local`.
W3C Candidate Recommendation
ed from the following versions:
Desktop 3n671n
- 4
- 25
- 9
- 10
- 5
Mobile / Tablet 4q224p
- 5.0
- No
- No
- 66
- 60
Notes z5jo
Browser for multiple background images varies. Please check the background-image entry for details.