Fade in and out 'background-image'

Question

How do you change the background-image so that images can consecutively (loop) fade in and fade out. I've tried creating a div and adding several images in there but that doesn't seem to work as I need the image to be of background-size: cover and the position to center. I know questions SIMILAR to this have been asked before but I can't seem to get this to work.

#landing {
  position: relative;
  margin-top: 0px;
  background-image:url('/images/blue.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-color: black;

}

Thanks!

Answer 1

Basically transitions do not apply to background images so you need to do the additional work. There are lots of jQuery plugins that do slideshows. They all have the same approach by using two image elements and fading one out to achieve the effect.

You can actually do this with pure CSS, and no additional elements depending on browser requirements. This would only work with two images though.

#landing {
    position: relative;
    border: 1px solid #666;
    height: 10em;
}

#landing::before, #landing::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-size: contain;
}

#landing::before {
    background: #fff url(http://www.openclipart.org/people/Map2Map/Waveski_Rear.svg) no-repeat center;
}

#landing::after {
    background: #fff url(http://www.openclipart.org/people/Map2Map/Waveski_Along_Wave.svg) no-repeat center;
    animation: fadeWithDelay 2s infinite linear alternate;
} 

@keyframes fadeWithDelay {
    0% {opacity: 1;}
    25% {opacity: 1;}
    75% {opacity: 0;}
    100% {opacity: 0;}   
}

JS Fiddle Demo

Also heres another approach if you needed multiple images and it didn't need to be dynamic

JS Fiddle Demo

Answer 2

Add height, width and z-index to your CSS:

#landing {
    position: relative;
    margin-top: 0px;
    background:url('https://www.google.com/images/srpr/logo11w.png') no-repeat;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    height:100px;
    width:100px;
    background-color: black;
    z-Index:-1;
}

Use setTimeout() to fade in and out.

function FadeOut(){
    $('#landing').fadeOut();
}

function FadeIn(){
     $('#landing').fadeIn();
}

setTimeout(function(){FadeOut();}, 1000);
setTimeout(function(){FadeIn();}, 1000);

You can add the setTimeout function in a forloop to make the background fade in and out for a longer time.

JSFiddle Demo

Answer 3

You'll also need a loop or an array of images; if you're looking into changing the image on fade out; something like this:

Smooth image fade out, change src, and fade in with jquery

I think taking a look at that will help you; its quite simple.

Answer 4

You could do that fairly easily with something like the following (working concept here at jsFiddle).

HTML:

<div id="dummyDiv"></div>
<div id="landing"><div id="cover" class="hide"></div></div>

As I say in the jsFiddle comments, you need a dummyDiv so that you can load the next image in line into it before loading it into #landing. Without this, you face loading times the first time looping through your array of images.

CSS:

#dummyDiv {
    position: inline;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
}
#landing {
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  margin-top: 0px;
  background-image:url('http://placekitten.com/200/300');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-color: black;
  transition: background-image .5s;
  z-index: -3;

}
#cover {
    background: white;
    opacity: .8;
    transition: opacity .7s;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
}
#cover.hide {
    opacity: 0;
}

Javascript

var kittens = ["http://placekitten.com/200/300", "http://placekitten.com/400/301", "http://placekitten.com/200/305", "http://placekitten.com/200/308"]

var currentKitten = 1;
var lastKitten = 0;

var changeUpTheKitten = function() {
    lastKitten = currentKitten;
    currentKitten = (++currentKitten < kittens.length) ? currentKitten : 0;
    // we need to cache the image so it loads in smoothly as a bg on the real #landing div
    $("#dummyDiv").css("background-image", "url("+kittens[currentKitten]+")");
    $("#cover").removeClass("hide");
    $("#landing").css("background-image", "url("+kittens[lastKitten]+")");
    //  url("+kittens[lastKitten]+")"
    setTimeout(function() { $("#cover").addClass("hide"); }, 700);
};

var kittenChangeInterval = setInterval(changeUpTheKitten, 3000);

Feel free to play with the numbers. You could make it look a lot different just by tweaking a few values. Any questions, feel free to ask.

Answer 5

for fadeIn and FadeOut effects you just need to follow these steps:

1.Make a div and put an image src tag in it with 100% width and height to behave like a background

<div id="mybody" class="av-row-40 bg-danger" style="width:80%;margin:auto;>
    <img src="C:/Users/Naveen/Desktop/Images/2.jpg" style="width:100%;height:100%" id="myimage">
</div>

$(document).ready(function){
        setInterval(function(){
            $("#myimage").fadeOut(1000);
            setTimeout(function(){
                $("#myimage").fadeIn(1000);
                if(index==5) index=0;
                index++;
                $("#myimage").attr("src",changeimages[index]);  
                /*alert(changeimages[index]);*/ 
            },1000);
        },3000);
  });