Прокрутка фона в переполненном div

Question

У меня проблема с прокруткой содержимого и фона в переполненном div.

Мой случай:

<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>

Содержание прокручивается, но фон родительского элемента остается фиксированным.Я хочу также прокрутить фон.Я думаю, что это возможно без добавления дополнительного слоя с нужным фоном внутри родительского div.

Есть идеи?

Answer 1

Ну, 2 года назад это могло быть не так, но background-attachment:local; решает проблему в Chrome 4+, IE 9+, Firefox 25+ и Safari 5+.

Поддержка в мобильных браузерах является переменной. Работает в IOS, не работает в браузере Android, и Android Chrome 47 утверждает, что поддерживает его, но пока он работает не во всех случаях.

Я обновил скрипку Алексея Иванова и удалил лишнюю оболочку bg.

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

Answer 2

Установите свой фон для внутреннего div, а не для контейнера, потому что контейнер остается на том же месте, но ваш внутренний div движется вверх.

<style>
   .parent{
      width:100px;
      height:200px;
      overflow:scroll;
   }
   .parent div{
       background-image: url(http://www.google.lv/images/srpr/logo3w.png);
       width:10px;
       height:1000px;
   }
</style>

Answer 3

Не знаю, как это исправить чисто css (поскольку размеры контейнера переполнения вычисляются не по размеру его содержимого, а по заданному размеру). Единственный способ, о котором я могу думать, это добавить второй контейнер:

http://jsfiddle.net/cBMNs/1/