Fading div background affects other divs on top of background image
I have a main div with a background image that fills the screen. I would like this image to keep changing, which works great. The problem I am facing is the divs that are on top of the background div also disappear, so essentially the entire page becomes blank. How can I do this so that it only fades out the background but leaves the rest of the content on the screen. Thanks a lot for any advice on this matter!
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
}
});
source to share
You need to move the content out of the background div. This way you can hide the div without hiding the content.
Use position:absolute
to place content in 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
for both root divs
#hpbg-image{ position:absolute; }
#stuff{ position:absolute; }
source to share
I think your question is well covered in the answer " CSS Background Opacity ". I would use the third answer using CSS ': before' as this solution supports images and not just colored backgrounds like some of the answers.
source to share
I would try with CSS3, obviously if the browser doesn't support CSS3 it won't work.
In your css:
#hpbg-image {
...
transition: background 1s linear;// Add this line to your CSS.
...
}
In 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
source to share