PDA

View Full Version : using jquery to slide a background image up with the rest of the content



FrickenTrevor
04-01-2013, 12:20 PM
Hey thanks for looking at this

So my idea is to have a vertical scroller much like this one (http://www.queness.com/resources/html/scroll/vertical.html), 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
04-01-2013, 09:35 PM
I made something for you HERE (http://mesdomaines.nu/slide_background.html).
Maybe that's what you want. Examine the source to see how it's done.

FrickenTrevor
04-04-2013, 04:56 AM
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
04-04-2013, 03:07 PM
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>