4

As the question says I am trying to fade background images from one image to another for a few images. I would like the initial image to appear immediately on page load, and then have it fade to the next image, then to the next, and back to the first, ongoing.

I have the background image in CSS:

.banner-image { 
background:transparent url('../images/8662834823_575a23516d_o.jpg') no-repeat center center;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover; 
height:800px; 
min-width: 1200px;
}

HTML:

<div class="banner-image">

//Content here
</div>

I would like the banner-image div to maintain it's height (so other div's appear below it). Which is why I want to maintain the images as CSS backgrounds.

How would I fade between images in jquery with the above requirements? Thank you for your help.

user1072337
  • 12,615
  • 37
  • 116
  • 195
  • Possible Dupe: http://stackoverflow.com/questions/17886870/fading-a-background-with-jquery – Andrew Clody Jul 26 '13 at 21:00
  • Why not use an image slider for this? Especially if your `.banner-image` div is only going to display images. Even if you need to place some text on top of this, it would be very doable. – hungerstar Jul 26 '13 at 21:01

3 Answers3

3

This is the simplest way to do this without a plugin: jsFiddle

Basically what I did here:

  1. Created a parent #bannerContainer which has position:relative;
  2. Added position:absolute; top:0px; left:0px; to .banner-image.
  3. Inserted a few .banner-image into the parent, giving each a different background image

  4. Applied the following jQuery:

    $(function(){

    var t = setInterval(function(){

        $('.banner-image').last().fadeOut(2000,function(){ // 2 second fade duration
            $this = $(this);
            $parent = $this.parent();
            $this.remove().css('display','block'); // remove the faded element
            $parent.prepend($this); // put it as the first element
        });

    },3000); // every 3 seconds
});

Markup:

<div id="bannerContainer">  
    <div class="banner-image"></div>
    <div class="banner-image" style="background-image:url(http://ns223506.ovh.net/rozne/00032cb2e758642ee9a942b49689f775/wallpaper-11152.jpg)"></div>
    <div class="banner-image" style="background-image:url(http://ns223506.ovh.net/rozne/9d1a802255f5c645945047acb4a2bac6/wallpaper-263.jpg)"></div>
    <div class="banner-image" style="background-image:url(http://ns223506.ovh.net/rozne/bd72cad0602bb9e53b4dc7f3fa4d4db9/wallpaper-4635.jpg)"></div>
</div>
Yotam Omer
  • 15,310
  • 11
  • 62
  • 65
  • and how do I have content appear over the images? – user1072337 Jul 26 '13 at 21:37
  • Best option is to wrap everything in another container, then adding an absolute container sibling to my code.. from there it's regular website programming – Yotam Omer Jul 26 '13 at 21:41
  • Also, I would like the images to take up the whole width of the page, they are not doing that now. How do I do this? I changed #bannerContainer to width 100%, and it's still not doing the entire page. – user1072337 Jul 26 '13 at 21:43
  • set also `.banner-image` as well as to the container to width:100%; height:100%; – Yotam Omer Jul 26 '13 at 21:45
1

It is not a plug and play solution, but here is a JQuery code to change the background image with a fadein effect

$(document).ready(function(){
    $('.banner-image').css({opacity: 0, background-image: 'url(../images/new.jpg)'}).fadeIn(2000);
});

Specify also some others CSS properties like background-size to maintain the ratio you want.

sdespont
  • 13,915
  • 9
  • 56
  • 97
0

Try this demo - Cross fading images using CSS3

http://css3.bradshawenterprises.com/cfimg/

Rohit Suthar
  • 3,528
  • 1
  • 42
  • 48