I'm attempting to overlay a .header-content div, containing the website content, on top of another .header-bg div, which has only a background cover and a set height using z-index.
When I change the .header-bg to position:absolute, the background image disappears, but the .header-content is placed correctly. If I change it to position: relative, the background appears, but the content is positioned beneath the background image instead of on top.
Has anyone encountered this issue before?
The HTML
<body>
<div class="header header-bg"></div>
<div class="header home-header">
<div class="header-content">
<a href="#" class="logo txtimg" title="Back to Homepage">LOGO</a>
<p class="slogan">SLOGAN</p>
</div>
<div class="header slider">
<div class="slider-navbar">
</div>
</div>
<navbar class="menu home-menu">
test
</navbar>
</div>
</body>
The CSS
.logo{
background: url(img/logo.png) no-repeat;
height: 96px;
width: 402px;
display: block;
margin: 0 auto;
padding-bottom: 1em;
}
.slogan {
color: #fff;
text-align: center;
width: 940px;
margin: 0 auto;
margin-top: 10px;
}
/*.css-img-replacement*/
.txtimg {
text-indent: -9999em;
overflow: hidden;
}
.header-bg{
background: #bf1718 url(img/header_bg.png) no-repeat 50% !important;
background-size: cover;
z-index:0;
position: relative;
}
.header {
height:588px;
}
.header-content {
padding: 1em 0;
z-index: 900;
position: absolute;
}
(I apologize for any English errors, as I am French. I hope you understand nevertheless)