8

I would like to create a slideshow in the header area of my page. It should change the background image every 10 seconds with a nice fade effect. And since I'm using jQuery for other stuff already I would like to use it for that as well.

So my markup is just:

<div id="header">
    <!--other stuff here...-->
</div>

And my CSS at the moment is:

#header {
    background:  url('images/header_slides/slide_1.jpg') no-repeat;
}

So now what I want is that after 10 seconds it would change to

#header {
    background:  url('images/header_slides/slide_2.jpg') no-repeat;
}

with a nice slow fade effect.

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
Gogogo
  • 81
  • 1
  • 1
  • 2

3 Answers3

14

I answered a similar question at How to fill browser window with rotating background Image?. You can fade background colors but not background images. You must have your images in <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so your images acts like a background images and are behind everything else. 

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(10000 * index).fadeIn(10000).fadeOut();
    });
}
test();

Check working example at http://jsfiddle.net/ewsQ7/5/

Community
  • 1
  • 1
Hussein
  • 42,480
  • 25
  • 113
  • 143
  • 11
    Here is a version that is more robust. It will continue to cycle and fade from one image to the next: http://jsfiddle.net/jtbowden/hYEzV/ – Jeff B Apr 01 '11 at 01:15
  • Great, there are many ways to improve and add on to this. By the way in your example you can just do $("#container img").first().appendTo('#container').fadeIn(5000).fadeOut(5000); instead of calling container twice. – Hussein Apr 01 '11 at 01:42
  • No, because by the second call, the DOM order has changed. I am fading out the first image, moving it to the end of the container, and then fading in the second image (which is now the first) simultaneously. This gives a cross-fade effect and allows me to pause between each fade. But, yes, there are a lot of ways to do this. – Jeff B Apr 01 '11 at 04:10
  • Wow this is exactly what I was looking for! Thank you very much especially for your example! – Gogogo Apr 13 '11 at 13:34
  • @Jeff B. Cheers for the fiddle man. totally helped me with a tremendously quick client mockup there. Can't use anything absolute in my design unfortunately so this'll never see production, but cheers anyway. – BizNuge Jul 03 '12 at 21:04
  • @Jeff B: Is there a way to prevent fading elements inside that same div#container? I want it to work as a background image and have some other elements above it. thanks. – medk Mar 28 '13 at 09:09
  • 4 years later... yes, you can use this as a background, if you wrap your page elements separately. http://jsfiddle.net/hYEzV/1237/ – Jeff B Apr 27 '17 at 18:13
13

You can fade a background image with CSS3 using transitions.

Check it out at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

For your use, set up jQuery to change the background image, but apply the transition style using CSS. Anytime the background changes, it will transition according to the CSS3 style.

#header
{
    background: url('images/header_slides/slide_1.jpg') no-repeat;
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
}
Mira Weller
  • 2,406
  • 22
  • 27
Robert Waddell
  • 879
  • 7
  • 15
  • 4
    Great answer. But in the future please do not use w3schools as a trusted reference. http://www.w3fools.com/ – ORyan Apr 22 '14 at 22:46
0

You can't fade a background image. But you can fade a layer above your #header with your next background image...

Thomas Menga
  • 1,858
  • 14
  • 17