background-attachement

by redky

HTML

<div class="box fixed">
    <div class="h"></div>
</div>
<div class="box scroll">
    <div class="h"></div>
</div>
<div class="box local">
    <div class="h"></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.box {
    height: 300px;
    overflow: auto;
    margin: 20px;
}
.h {
    height: 500px;
}
/* 随着 container 的 scroll 而 scroll */
 .scroll {
    background: #ffa url(https://www.google.com.hk/images/srpr/logo11w.png) repeat-y 0 0 scroll;
}
/* 随元素内容/container scroll 而 scroll */
 .local {
    background: #faa url(https://www.google.com.hk/images/srpr/logo11w.png) repeat-y 0 0 local;
}
/* fixed */
 .fixed {
    background: #ffa url(https://www.google.com.hk/images/srpr/logo11w.png) repeat-y 0 0 fixed;
}