Fade out of div background affects other divs on top of background image

Question

I have a main div with a background image which fills the screen. I'd like this image to constantly change which works fine. The problem I'm having is the divs which are on top of the background div are also being faded out so essentially the whole page goes blank. How can I have so that it only fades out the background but leaves the rest of the content on screen. Many thanks for any advice on the issue!

html

     <div id="hpbg-image">
   <div id="header">
      <div id="logo"><img src="images/logo.png"></div>
      <div id="login"><img src="images/login.png"></div>
      <div id="menu">

      </div>
   </div><!--Header End-->
    <div id="search-area">
        <div id="holder1">
             <img src="images/slogan.png"><br>
             <div id="searchbox">

             </div>
        </div>
     </div>
    </div>
    <div id="content1" style="height:150px">No minimum contract, pay for everything online</div>
        <div id="howitworks">
            <b>How it works</b>
        </div>
    <div id="freelancers" style="height:300px">

</div>

CSS

#hpbg-image {
    position: relative;
    height: 100%;
    width: 100%;
    background: url(images/image1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

#menu {
     padding-top:20px;
     padding-right:170px;
     position: absolute;
     right:0;
     color: #ffffff;
     font-family: 'Verdana',serif;
}

#login {
     padding-top:8px;
     padding-right:50px;
     position: absolute;
     right:0;
}

#holder1 {
    margin: 0;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width:838px;
}

#searchbox {
    height:78px;
    width:458px;
    background: url(images/searchbg.png);
    background-repeat: no-repeat;
    padding-top: 22px;
    padding-bottom: 18px;
    padding-left:40px;
    text-align: center;
    margin: 0 auto;
}

jQuery

$(document).ready(function() {

    var images = [];
    images[0] = "images/image1.jpg";
    images[1] = "images/image2.jpg";
    images[2] = "images/image3.jpg";

    var i = 0;
    setInterval(fadeDivs, 2000);

    function fadeDivs() {
        //start with id = 0 after 5 seconds

        $('#hpbg-image').css("background-image", "url("+images[i]+")").fadeOut(500, function() {
            $(this).css("background-image", "url("+images[i]+")").fadeIn(500);
        });

        i++;

        if (i == 3) 
            i = 0; //repeat from start
    }
});

score 2 · Accepted Answer · answered Jan 10 '15 at 22:43

You have to move the content out of the background div. So you can hide the div without hiding the content.

Use position:absolute to place the content over the background:

<div id="hpbg-image">
</div>
<div id="stuff">
    <div id="header">
      <div id="logo"><img src="images/logo.png"></div>
      <div id="login"><img src="images/login.png"></div>
      <div id="menu">

      </div>
    </div><!--Header End-->
    <div id="search-area">
        <div id="holder1">
             <img src="images/slogan.png"><br>
             <div id="searchbox">

             </div>
        </div>
     </div>
    </div>
    <div id="content1" style="height:150px">No minimum contract, pay for everything online</div>
        <div id="howitworks">
            <b>How it works</b>
        </div>
    <div id="freelancers" style="height:300px">
    </div>

</div>

Now use position:absolute on both root divs

#hpbg-image{ position:absolute; }
#stuff{ position:absolute; }

`#stuff` wouldn't need to be absolutely positioned. Only `#hpbg-image` — Turnip, Jan 10 '15 at 23:06

score 0 · Answer 2 · edited May 23 '17 at 10:34

0

I think your question is well covered in the answer "CSS Background Opacity". I'd use the third response using CSS ':before' as that solution supports images rather than just color backgrounds like some responses.

edited May 23 '17 at 10:34

Community

1
1

answered Jan 10 '15 at 22:41

stealthwang

915
6
8

score 0 · Answer 3 · answered Jan 10 '15 at 23:00

I'd try with CSS3, obviously, if the browser doesn't support CSS3, this won't work.

In your css:

#hpbg-image {
  ...
  transition: background 1s linear;// Add this line to your CSS.
  ...
}

In your js:

function fadeDivs() {
    //start with id=0 after 5 seconds

    $('#hpbg-image').css("background-image", "url("+images[i]+")");
    i++;
    if (i==3) i=0; //repeat from start
}

You can check the result here

Fade out of div background affects other divs on top of background image

3 Answers3