Question

I saw a solution to the former part of the question and it worked great when I used it,I’ve included it below (Thanks to rsofter if you see this!). I want to know what must be added in order to add fadeIn, fadeOut effects to the background image?
The solution I came across was:

You can use jquery to do this.

Your markup:

<div id="div1"></div>
<div id="div2"></div>

Your script:

$("#div1").mouseover( function() {
    $("#div2").css("background-image", "url('image.png')");
});

Answer 1

You can’t animate a background-image’s opacity. It’s not possible. The workaround is to place an <img> within a shared parent container of <div id="2">

Scenario ->

<div id="1">
    div 1
</div>
<div id="wrapper">
    <img src="path/to/my/background/image"/>
    <div id="2">

    </div>
</div>

The relative css ->

#wrapper{
    position:relative;
}
#wrapper img{
    position:absolute;
        top:0;
        left:0;
    z-index:-1
}
#wrapper #div2{
    display:block;
    height: // this value should be the same as the background images size.
    width:  // this value should be the same as the background images size.
}

the jQuery ->

$('#div1').hover(function(){
    $('#wrapper img').fadeOut('slow', function(){
        //this is the callback function of fadeout, now change the background image URL.    
        $(this).css('background-image', 'location/to/my/new/image.ext');
        var checkForDelay = setTimeout(function(){
            //if they haven't moused out after 3 seconds, then show them the new background.
            $('#wrapper img').fadeIn('slow');
        }, 3000);
    });
}, function(){
   clearTimeout(checkForDelay);
   $('#wrapper img').fadeIn('slow');
});

jsFiddle outlining similar principals