What is the difference between background-attachment : scroll and local? - css

Question

What is the difference between background-attachment : scroll and local?
I have been trying to read some blogs on these topics, but not able to construe the difference between them?.

Answer 1

From the spec:
fixed: The background is fixed with regard to the viewport. (...) Even if an element has a scrolling mechanism (...), a ‘fixed’ background doesn't move with the element.
local: The background is fixed with regard 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 with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)
Demos: fixed, local, scroll.

Answer 2

fixed: the background image is fixed relative to the browser's window whether or not the element scrolls or the content within it scrolls. Demo
.box{
width: 400px;
height: 1000px;
background-color: #f2f2f2;
overflow: scroll;
background-image: url(http://i.imgur.com/9onLIRX.jpg);
background-attachment: fixed;
background-size: cover;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aperiam distinctio doloribus odio mollitia inventore ipsa necessitatibus alias ab, harum et dolorum iusto hic vel? Nobis tempora consequuntur ab, omnis quisquam nihil! Quod repudiandae provident mollitia architecto placeat nostrum, accusamus, non praesentium consequatur delectus tempore. Placeat aspernatur consequatur praesentium, exercitationem doloribus vel cum vitae in ducimus maiores, fugit repudiandae accusamus, quaerat, commodi explicabo eius beatae culpa distinctio! Eaque maxime dolorum ad nostrum cupiditate temporibus, doloribus, esse voluptatem minus explicabo cum atque sit adipisci quis magnam ea! Et pariatur nobis ad odit, nihil sunt nostrum unde ipsum, eligendi voluptatem libero nemo laudantium accusamus, tenetur atque. Totam reiciendis eveniet, dolorem cumque asperiores repellat vero. Inventore ducimus ratione vitae dolores alias ex officiis hic, quaerat voluptatibus nisi officia numquam quasi odio itaque repellat cumque animi, eius quod ipsum harum temporibus earum, ipsa illo libero. Odit nostrum fugiat aliquid porro labore blanditiis dolore quisquam accusantium voluptatibus minima voluptate itaque, a consequuntur aperiam sapiente quidem molestiae tenetur atque quia ducimus! Deleniti libero id laudantium! Deleniti, quos corporis unde consectetur vel possimus sed quidem aliquid ipsam mollitia alias id sapiente esse. Hic impedit, laudantium fugit adipisci commodi quaerat nihil tempore, eligendi explicabo beatae magni maiores ratione vel dolores omnis aperiam rerum corporis distinctio, cumque, repellat ducimus. Nisi, mollitia nostrum obcaecati ipsum quis repudiandae harum, nemo ex incidunt ipsam explicabo repellendus suscipit laboriosam accusamus, nihil tenetur quos. Totam modi velit sed ipsa consequatur quaerat excepturi iusto nesciunt quo maxime sint facilis officiis, eveniet quis libero possimus molestiae veniam harum illum quam assumenda dolorem nam voluptatum! A eligendi perferendis cum iusto! Possimus, neque! Recusandae nobis ut minima facilis quae, itaque vitae, magnam ea eum ab aliquid, ipsum porro laboriosam expedita nulla doloribus sit! Sunt ullam molestiae nulla maxime quis veniam rem at? Similique quidem commodi ducimus libero debitis ipsum expedita recusandae, suscipit minima eius obcaecati illum fugit, neque consequuntur iste iure rem iusto blanditiis eos vel velit perferendis unde sed. Voluptas non, minus placeat itaque animi facere numquam dolorem nisi, molestiae tenetur rem aliquam praesentium modi inventore et aut corrupti magni dolorum ipsam sequi incidunt fugiat explicabo at, alias. Minima quisquam alias ipsa esse saepe explicabo vel, sed modi incidunt commodi corporis ullam soluta, consequuntur optio. Aut facilis nam, eius, cum autem commodi libero tempora quisquam illum hic, quia tenetur! Mollitia, quas nisi ab, autem optio explicabo inventore. Ipsum voluptate ab magnam consequatur commodi nesciunt. Quae ex rerum sint quod, suscipit, doloremque corporis explicabo sunt, quasi odio accusantium, totam ullam fugiat distinctio soluta aliquam eos? Debitis nisi ab iusto dolores laboriosam natus, assumenda similique aliquam mollitia ea, libero quibusdam sint doloribus. Blanditiis, tempora, obcaecati. Eveniet distinctio, amet quidem non tempore expedita repellendus. Ab nobis, enim totam quae, fuga, ullam porro libero nemo deleniti eveniet obcaecati quasi? Quis vel voluptatum ipsa hic, possimus obcaecati laudantium aspernatur et. Fuga explicabo nobis quae pariatur doloremque natus id, perferendis corporis velit beatae consequuntur consequatur vero harum repudiandae nesciunt porro incidunt sit, ex, animi impedit dolorem deserunt molestiae, provident. Neque, nihil sunt voluptates.
</div>
local: the background image is fixed relative to the element but scrolls with element itself (thus scrollable relative to browser's window). Demo
.box{
width: 400px;
height: 1000px;
background-color: #f2f2f2;
overflow: scroll;
background-image: url(http://i.imgur.com/9onLIRX.jpg);
background-attachment: local;
background-size: cover;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aperiam distinctio doloribus odio mollitia inventore ipsa necessitatibus alias ab, harum et dolorum iusto hic vel? Nobis tempora consequuntur ab, omnis quisquam nihil! Quod repudiandae provident mollitia architecto placeat nostrum, accusamus, non praesentium consequatur delectus tempore. Placeat aspernatur consequatur praesentium, exercitationem doloribus vel cum vitae in ducimus maiores, fugit repudiandae accusamus, quaerat, commodi explicabo eius beatae culpa distinctio! Eaque maxime dolorum ad nostrum cupiditate temporibus, doloribus, esse voluptatem minus explicabo cum atque sit adipisci quis magnam ea! Et pariatur nobis ad odit, nihil sunt nostrum unde ipsum, eligendi voluptatem libero nemo laudantium accusamus, tenetur atque. Totam reiciendis eveniet, dolorem cumque asperiores repellat vero. Inventore ducimus ratione vitae dolores alias ex officiis hic, quaerat voluptatibus nisi officia numquam quasi odio itaque repellat cumque animi, eius quod ipsum harum temporibus earum, ipsa illo libero. Odit nostrum fugiat aliquid porro labore blanditiis dolore quisquam accusantium voluptatibus minima voluptate itaque, a consequuntur aperiam sapiente quidem molestiae tenetur atque quia ducimus! Deleniti libero id laudantium! Deleniti, quos corporis unde consectetur vel possimus sed quidem aliquid ipsam mollitia alias id sapiente esse. Hic impedit, laudantium fugit adipisci commodi quaerat nihil tempore, eligendi explicabo beatae magni maiores ratione vel dolores omnis aperiam rerum corporis distinctio, cumque, repellat ducimus. Nisi, mollitia nostrum obcaecati ipsum quis repudiandae harum, nemo ex incidunt ipsam explicabo repellendus suscipit laboriosam accusamus, nihil tenetur quos. Totam modi velit sed ipsa consequatur quaerat excepturi iusto nesciunt quo maxime sint facilis officiis, eveniet quis libero possimus molestiae veniam harum illum quam assumenda dolorem nam voluptatum! A eligendi perferendis cum iusto! Possimus, neque! Recusandae nobis ut minima facilis quae, itaque vitae, magnam ea eum ab aliquid, ipsum porro laboriosam expedita nulla doloribus sit! Sunt ullam molestiae nulla maxime quis veniam rem at? Similique quidem commodi ducimus libero debitis ipsum expedita recusandae, suscipit minima eius obcaecati illum fugit, neque consequuntur iste iure rem iusto blanditiis eos vel velit perferendis unde sed. Voluptas non, minus placeat itaque animi facere numquam dolorem nisi, molestiae tenetur rem aliquam praesentium modi inventore et aut corrupti magni dolorum ipsam sequi incidunt fugiat explicabo at, alias. Minima quisquam alias ipsa esse saepe explicabo vel, sed modi incidunt commodi corporis ullam soluta, consequuntur optio. Aut facilis nam, eius, cum autem commodi libero tempora quisquam illum hic, quia tenetur! Mollitia, quas nisi ab, autem optio explicabo inventore. Ipsum voluptate ab magnam consequatur commodi nesciunt. Quae ex rerum sint quod, suscipit, doloremque corporis explicabo sunt, quasi odio accusantium, totam ullam fugiat distinctio soluta aliquam eos? Debitis nisi ab iusto dolores laboriosam natus, assumenda similique aliquam mollitia ea, libero quibusdam sint doloribus. Blanditiis, tempora, obcaecati. Eveniet distinctio, amet quidem non tempore expedita repellendus. Ab nobis, enim totam quae, fuga, ullam porro libero nemo deleniti eveniet obcaecati quasi? Quis vel voluptatum ipsa hic, possimus obcaecati laudantium aspernatur et. Fuga explicabo nobis quae pariatur doloremque natus id, perferendis corporis velit beatae consequuntur consequatur vero harum repudiandae nesciunt porro incidunt sit, ex, animi impedit dolorem deserunt molestiae, provident. Neque, nihil sunt voluptates.
</div>

Answer 3

After reading the docs and clicking through the accepted answer's demos, I still felt confused. Sometimes you just want a jargon-free explanation!
CSS-Tricks to the rescue! 🎉
Either ☝️click this link, or 👇click the Run code snippet button for a superior demo.
Note: As you explore the demos, pause between clicks. Sometimes you need to give the browser a chance to figure out which thing it's going to scroll based on whether you're hovering over an image or the surrounding whitespace.
The rules, paraphrased
scroll — The background image travels with the page, no matter what.
fixed — The background image doesn't travel with anything. Feels kinda parallaxy.
local — The background image travels with whatever's under the current mouse position.
Tip: for each case…
1. Scroll over the white border.
2. Now stop, move the cursor over an image. Pause, then scroll.
Enjoy!
#import "compass/css3";
h2 {
text-align: center;
margin-top: 48px;
}
div {
height: 200px;
width: 50%;
max-width: 600px;
margin: 32px auto;
overflow-x: hidden;
overflow-y: scroll;
}
.with-image {
background: url('https://loremflickr.com/320/240/flower');
}
.content {
height: 400px;
width: 100%;
font-size: 3rem;
color: #ddd;
}
.extra-space {
margin-bottom: 50px;
}
<h2><code>scroll (default)</code></h2>
<div style="background-attachment: scroll;" class="with-image">
<div class="content">
scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll
</div>
</div>
<div>Background fixed to the page's scrollview</div>
<h2><code>fixed</code></h2>
<div style="background-attachment: fixed;" class="with-image">
<div class="content">
fixed fixed fixed fixed fixed fixed fixed fixed fixed fixed
</div>
</div>
<div>Background fixed to the immobile window/viewport</div>
<h2><code>local</code></h2>
<div style="background-attachment: local;" class="with-image">
<div class="content">
local local local local local local local local local locala
</div>
</div>
<div>Background fixed to the element's scrollview (moves with other contents)</div>
<br class="extra-space">