# background-attachment

Published articles for background-attachment.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Understanding CSS Multiple Backgrounds

DevFeed: [Understanding CSS Multiple Backgrounds](<https://devfeed.tech/articles/understanding-css-multiple-backgrounds-45297.md>)

Original publisher: [Read original article](<https://ishadeed.com/article/css-multiple-backgrounds/>)

Author: Ahmad Shadeed

Published: 2020-07-22T00:00:00Z

Content type: tutorial

Language: en

Sources: [Ahmad Shadeed](<https://devfeed.tech/sources/ahmad-shadeed.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [background](<https://devfeed.tech/tags/background.md>), [background-attachment](<https://devfeed.tech/tags/background-attachment.md>), [background-image](<https://devfeed.tech/tags/background-image.md>), [background-longhand](<https://devfeed.tech/tags/background-longhand.md>), [background-size](<https://devfeed.tech/tags/background-size.md>), [browser](<https://devfeed.tech/tags/browser.md>), [css](<https://devfeed.tech/tags/css.md>), [css-backgrounds](<https://devfeed.tech/tags/css-backgrounds.md>), [css-properties](<https://devfeed.tech/tags/css-properties.md>), [developers](<https://devfeed.tech/tags/developers.md>), [examples](<https://devfeed.tech/tags/examples.md>), [explainer](<https://devfeed.tech/tags/explainer.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [layer](<https://devfeed.tech/tags/layer.md>), [multiple](<https://devfeed.tech/tags/multiple.md>)

### AI overview

A tutorial on CSS multiple backgrounds explains the background shorthand, positioning and sizing layers, and how to combine multiple background layers with visual examples.

### Source excerpt

CSS is one of the most used CSS properties. However, using multiple backgrounds is still not well known across all developers. I will hugely focus on the potential of using multiple backgrounds and leverage the CSS to its full power. In this article, I will explain the property in detail, and provide a visual explainer on how we can stack multiple backgrounds, and the actual benefit of it. Of course, there will be some visual examples, you're in for a treat!

## Pure CSS scrolling shadows with background-attachment: local

DevFeed: [Pure CSS scrolling shadows with background-attachment: local](<https://devfeed.tech/articles/pure-css-scrolling-shadows-with-background-attachment-local-52044.md>)

Original publisher: [Read original article](<https://lea.verou.me/2012/04/background-attachment-local/>)

Author: Lea Verou

Published: 2012-04-26T00:00:00Z

Content type: tutorial

Language: en

Sources: [Lea Verou's blog](<https://devfeed.tech/sources/lea-verou-s-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>)

Tags: [background-attachment](<https://devfeed.tech/tags/background-attachment.md>), [blog](<https://devfeed.tech/tags/blog.md>), [browser-support](<https://devfeed.tech/tags/browser-support.md>), [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [css-backgrounds-borders](<https://devfeed.tech/tags/css-backgrounds-borders.md>), [scrolling](<https://devfeed.tech/tags/scrolling.md>), [tips](<https://devfeed.tech/tags/tips.md>)

### AI overview

This tutorial explains how CSS background-attachment: local can create scrolling shadows inside scrollable containers without extra pseudoelements or containers. It contrasts the scroll, fixed, and local values and notes that the approach can reduce code while offering somewhat narrower browser support.

### Source excerpt

A few days ago, the incredibly talented Roman Komarov posted an experiment of his with pure CSS "scrolling shadows". If you're using Google Reader, you are probably familiar with the effect: In Roman's experiment, he is using absolutely positioned pseudoelements to cover the shadows (which are basically radial gradients as background images), taking advantage of the fact that when you scroll a scrollable container, its background does not scroll with it, but absolutely positioned elements within do. Therefore, when you scroll, the shadows are no longer obscured and can show through. Furthermore, these pseudoelements are linear gradients from white to transparent, so that these shadows are uncovered smoothly. When I saw Roman's demo, I started wondering whether this is possible with no extra containers at all (pseudoelements included). It seemed like a perfect use case for background-attachment: local. Actually, it was the first real use case for it I had ever came up with or seen. "background-attachment... what? I only know scroll and fixed!" scroll and fixed were the only values for background-attachment back in the days of CSS 2.1. scroll is the initial value and positions the background relative to the element it's applied on, whereas fixed positions it relative to the viewport, resulting in the background staying in place when the page was scrolled. As a result of these definitions, when only a part of the page was scrollable (e.g. a <div> with overflow: auto), its background did not scroll when the container itself was scrolled. In Backgrounds & Borders Level 3, a new value was added to lift this restriction: local. When background-attachment: local is applied, the background is positioned relative to the element's contents. The result is that it scrolls when the element is scrolled. This is not a new feature, it has been with us since the first drafts of Backgrounds and Borders 3 in 2005 (of course, implementations took some more time, starting from 2009). If th