Scrolling background in overflowed div

Question

I have a problem with scrolling content and background in overflowed div.

My case:

<style>
   .parent{
      background-image: url(http://www.google.lv/images/srpr/logo3w.png);
      width:100px;
      height:200px;
      overflow:scroll;
   }
   .parent div{
       background-color:red;
       width:10px;
       height:1000px;
   }
</style>
<div class="parent">
   <div>
      a
      b
      c
      f
      d
   </div>
</div>

The content is scrolling, but background of parent remains fixed. I want to scroll background also. I think it is possible without adding additional layer with desired background inside parent div.

Any ideas?

Answer 1

Well, 2 years ago this might not have been the case, but background-attachment:local; solves the problem in Chrome 4+, IE 9+, Firefox 25+ and Safari 5+.

Support in mobile browsers is variable. Works in IOS, does not work in Android browser, and Android Chrome 47 claims to support it, but it doesn't work correctly in all cases yet.

I Updated @Alexey Ivanov's fiddle and removed the extra bg wrapper.

http://jsfiddle.net/nilloc/c5yfn81s/