fading between background images using only html/css/js

Question

I have 6 images of different sizes that I need to load into a single fading background. I want the first image to load when the page is opened, and in X amount of seconds fade directly into a second image (no white or black transparency in the transition) and then loop when it gets to the end. I've found hundreds of examples for this but none seem to work properly for what I need it to do. Is there a way I can do it solely with html/css or is it too complex for that?

Thanks

Answer 1

Assuming you want fullscreen here and that you're ok with Javascript (since it's mentioned in the title), let's say you have two divs container with the following css:

.bg {
    position   : fixed;
    width      : 100%;
    height     : 100%;
    top        : 0;
    left       : 0;
    opacity    : 0;
    transition : opacity .8s ease-out; // not adding browser specifics for clarity sake
    background : #FFF url(photo.jpg) 0 0 no-repeat;
}

.active {
  opacity      : 1;
}

then in you js you can simply do:

var images = ["photo_1.jpg", "photo_2.png", "photo_3.gif","photo4.jpg"]
  , delay  = 3000  // 3 seconds
  , pointer= 0
  , xfade  = function() {
         var selectedBg = $('.bg:not(.active)')
           , image      = images[pointer%images.length];

         $('.bg.active').removeClass('active');
         selectedBg.css({'backgroundImage':"url("+image+")"}).addClass('active');
         pointer += 1;
    }

setInterval(xfade, delay);

Fiddle: http://jsfiddle.net/F426j/1/

Answer 2

This is possible with pure css, may not be the safest bet due to browser limitations of css3 animations.

What I am doing is using a keyframe to change between the pictures with an infinite loop on it.

Break down of the css animation style:

-webkit(1)-animation: slides(2) 15s(3) linear infinite(4);

1. Browser prefix

2. keyframes name

3. how long the animation is

4. Informs the animation to loop once completed.

This is the css and the keyframe:

.mainCont {
    width: 100%;
    height: 100%;
    background-image: url("http://forestry.ky.gov/Kentuckysstateforests/PublishingImages/TygartsStateForest.jpg");
    background-size: cover;
    background-position: center center;
    animation: slides 15s linear infinite;
    -webkit-animation: slides 15s linear infinite;
    -moz-animation: slides 15s linear infinite;
    -o-animation: slides 15s linear infinite;
    -ms-animation: slides 15s linear infinite;
}

@-webkit-keyframes slides {
    from {
        background: url("http://forestry.ky.gov/Kentuckysstateforests/PublishingImages/TygartsStateForest.jpg");
        background-size: cover;
        background-position: center center;
    }
    20% {
        background: url("http://miriadna.com/desctopwalls/images/max/Falling-asleep-forest.jpg");
        background-size: cover;
        background-position: center center;
    }
    40% {
        background: url("http://forestry.ky.gov/Kentuckysstateforests/PublishingImages/TygartsStateForest.jpg");
        background-size: cover;
        background-position: center center;
    }
    60% {
        background: url("http://upload.wikimedia.org/wikipedia/commons/f/f6/Epping_Forest_Centenary_Walk_2_-_Sept_2008.jpg");
        background-size: cover;
        background-position: center center;
    }
    80% {
        background: url("http://foundwalls.com/wp-content/uploads/2012/06/forest-tree-sun-ray-light-spruce.jpg");
        background-size: cover;
        background-position: center center;
    }
    to {
        background: url("http://static1.wikia.nocookie.net/__cb20130516163359/creepypasta/images/c/c5/Green-forest-wallpaper.jpg");
        background-size: cover;
        background-position: center center;
    }
}

Finally, a fiddle: Demo-remove show in url to see code