Question

I am trying to create some nested divs where the middle one should have a fixed background image that does not move together with the rest of the content when scrolling. Although my solution works for FF, Chrome and Opera I still have a problem in IE7. I know that this is a known bug in IE7 but I was still not able to understand how it can be solved.

<div style="width: 240px; height:320px;">
<div style="width: 240px; height:320px; background: url(http://new-things-to-come.com/imgs/prsite.png);position: relative; background-color : #666; background-repeat: no-repeat; background-position: top left; background-attachement: fixed; text-align: left; color: #fff;  font-family: Verdana, sans-serif; font-size: 100%;;overflow-y : scroll;">

    <div>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
        </p>
    </div>

</div>

An example can be seen in here.

Thanks

Answer 1

You may add background-attachment: fixed; to CSS. It looks it has solved the problem.