Fading the background image of the section - only background

Question

I have this section

    <section ID="Cover">
        <div id="searchEngine">hello</div>
    </section>

I want to fade in/out the background image of Cover. I am using the following function to do that but it fades the whole section. Is there a way I can fade the background only? Something like

$("#Cover").css("background-image").fadeOut(); ??

(I am also setting this image for the first time in the below function)

    var imageID=0;
var time=0;
function changeimage(every_seconds)
{
    //change the image
    if(imageID==0)
    {
        $("#Cover").fadeOut(time, function () {
        $("#Cover").css("background-image", "url(images/cover1.jpg)");
        $("#Cover").fadeIn(time);});
        imageID++;
        time=1000;
    }
    else 
    {
        if(imageID==1)
        {
            $("#Cover").fadeOut(time, function () {
            $("#Cover").css("background-image", "url(images/cover2.jpg)");
            $("#Cover").fadeIn(time);});
            imageID++;
        }
        else
        {
            if(imageID==2)
            {
                $("#Cover").fadeOut(time, function () {
                $("#Cover").css("background-image", "url(images/cover3.jpg)");
                $("#Cover").fadeIn(time);});
                imageID++;
            }
            else
            {
                if(imageID==3)
                {
                    $("#Cover").fadeOut(time, function () {
                    $("#Cover").css("background-image", "url(images/cover4.jpg)");
                    $("#Cover").fadeIn(time);});
                    imageID++;
                }
                else
                {
                    if(imageID==4)
                    {
                        $("#Cover").fadeOut(time, function () {
                        $("#Cover").css("background-image", "url(images/cover5.jpg)");
                        $("#Cover").fadeIn(time);});
                        imageID=0;
                    }
                }
            }
        }
    }
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}

possible duplicate http://stackoverflow.com/questions/5002351/jquery-fade-css-background-image-change — Greenhorn, Sep 27 '13 at 10:42
You should apply background to a child element of cover which will take all size of cover element. And then call animation methods on this child — A. Wolff, Sep 27 '13 at 10:43
If you use images (i.e. img tags) instead of CSS background-images you can do this easily. — iCollect.it Ltd, Sep 27 '13 at 10:59
You can use [SupersizedJs](http://buildinternet.com/project/supersized/). Its simple to implement and can be customized. — Anusha, Sep 27 '13 at 11:33

Cameron · Accepted Answer · 2013-09-27T23:31:18.357

I agree with TrueBlueAussie, It will be easier, if you are using instead of CSS background-img. Here is a working sample.

<html>
    <head>
        <style type="text/css">
        #bgImg { position: fixed; width: 100%; height: 100%; top:0; left: 0; z-index: -1;}
        #mainContent{width: 960px; margin: 20px auto; padding: 15px; background: #f2f2f2; text-align: center;}
        </style>
    </head>
    <body>
        <img src="yourImg.jpg" id="bgImg">
        <section id="mainContent">
            <h2>Your Heading</h2>
            <p>Your content....</p>
            <button id="inBtn">Background Image fade in</button>
            <button id="outBtn">Background Image fade out</button>
        </section>
    </body>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>

        /*
            resize function
            From Dave Jay's Blog 
            url: http://davejay.exit42design.com/entry/Design/44/
        */

        function resize(){
            $("#bgImg") 
            .width($(window).width()) 
            .height($(window).width() * .67); 

            if($("#bgImg").height() <= $(window).height()){ 
                $("#bgImg")
                .height($(window).height())
                .width($(window).height() * 1.5);
            }

        }

        $(document).ready(function(){


            resize(); 


            $("#inBtn").on("click",function(){
                $("#bgImg").fadeIn();

            }); 

            $("#outBtn").on("click",function(){
                $("#bgImg").fadeOut();

            }); 

        });

        $(window).resize(function(){ resize(); });

    </script>
</html>

Fading the background image of the section - only background

1 Answers1