Results 1 to 4 of 4

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

  1. #1
    Join Date
    Aug 2009
    Location
    charset utf-8
    Posts
    135
    Thanks
    4
    Thanked 5 Times in 5 Posts

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

    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
    Last edited by FrickenTrevor; 04-01-2013 at 08:05 PM.

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,321
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    29

    Default

    I made something for you HERE.
    Maybe that's what you want. Examine the source to see how it's done.
    Last edited by molendijk; 04-01-2013 at 09:40 PM.

  3. #3
    Join Date
    Aug 2009
    Location
    charset utf-8
    Posts
    135
    Thanks
    4
    Thanked 5 Times in 5 Posts

    Default

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

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,321
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    29

    Default

    The following 'nicer' code works:
    Code:
    <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>

Similar Threads

  1. jQuery Image Magnify v1.1 Background?
    By Chicklettes in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-20-2010, 01:10 AM
  2. Replies: 1
    Last Post: 05-15-2009, 03:00 PM
  3. Background Image Slideshow- Delay before first slide/image appears
    By designbysjr in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-15-2009, 12:41 PM
  4. Background Image Slide Show
    By jeremiad in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 10-12-2007, 12:11 AM
  5. Switch Content; have rest of content flow in place of contracted element
    By alicson in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-12-2005, 12:47 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •