using jquery to slide a background image up with the rest of the content

[FrickenTrevor]

Hey thanks for looking at this

So my idea is to have a vertical scroller much like this one, but instead have a background image that scrolls up with the content so a new backround is revealed. But at the same time I'm trying to figure out how to make a header on top of that scroller that stays put.
The background also uses the background-size: cover property so it fills the whole page, while somehow working in ie 7-8

[molendijk]

I made something for you HERE.
Maybe that's what you want. Examine the source to see how it's done.

[FrickenTrevor]

Thank you thats almost perfect! I couldnt figure out how to layer it so the background images dont cover up the rest of my page (they have to fit bellow the content).

Also turning this code

<div id="item2" class="item" >
<a name="item2"></a>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Homo_heidelbergensis_%2810233446%29.jpg/250px-Homo_heidelbergensis_%2810233446%29.jpg" style="position: absolute; left:20%; top:100%; margin-top:50px;width:60%;height:100%" alt="">
<div class="content">item2 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a><hr>Homo heidelbergensis.</div>
</div>

into something nicer like this

<div id="item2" class="item" >
<a name="item2"></a>
<div class="content">item2 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a><hr>Homo heidelbergensis.</div>
</div>

<style>
#item-2 {
           background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Homo_heidelbergensis_%2810233446%29.jpg/250px-Homo_heidelbergensis_%2810233446%29.jpg) no-repeat;
           background-size: fill;
}
</style>

didnt work out for me

[molendijk]

The following 'nicer' code works:

<div id="item2" class="item" style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Homo_heidelbergensis_%2810233446%29.jpg/250px-Homo_heidelbergensis_%2810233446%29.jpg); background-repeat: no-repeat; background-size: 50%; background-position: 50% 50px; ">
<a name="item2"></a>
<div class="content" >item2 <a href="#item1" class="panel" >1</a> | <a href="#item2" class="panel" >2</a> | <a href="#item3" class="panel" >3</a> | <a href="#item4" class="panel" >4</a> | <a href="#item5" class="panel" >5</a><hr>Homo heidelbergensis.</div>
</div>