DIV behind DIV positioning - css

Question

This is a .header class with a background image, and navigation in the tag. What I am
trying to do is separate the background image from .header and place it in a new div (that will
go behind the navigation, but keep the same position as is) so I can
add some filters and customise it further.
<style>
.header {
float: left;
height: 300px;
width: 100%;
margin-top: 2%;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
background-image: url(../5898169717_6f4b2a3515_b.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: auto;
background-color: #91918e;
}
.header .nav-header { margin-top: 15px; padding-left: 30px; padding-right: 50px; }
.header .nav-header #navigation {
float: left;
position: relative;
}
.header .nav-header #navigation li {
position: relative;
list-style: none;
display: inline-block;
margin-top: 5px;
}
.header .nav-header #navigation li a {
padding: 0 inherit;
padding-left: 10px;
padding-right: 10px;
display: inline-block;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 2px #242526, 0 0 1em #242526, 0 0 0.2em #242526;
text-decoration: none;
font-size: 14px;
font-weight: 700;
color: white;
text-align: left;
transition-property: color;
transition-duration: 100ms;
transition-timing-function: linear;
-webkit-transition-property: color;
-webkit-transition-duration: 100ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: color;
-moz-transition-duration: 100ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: color;
-o-transition-duration: 100ms;
-o-transition-timing-function: ease-out;
-ms-transition-property: color;
-ms-transition-duration: 100ms;
-ms-transition-timing-function: ease-out;
}
.header .nav-header #navigation li a:last-child {}
.header .nav-header #navigation li:hover .main { color: #f0b92d;}
/** Dropdown **/
.header .nav-header #navigation li .sub-nav-wrapper {
display: block;
position: absolute;
z-index: 30;
margin-left: -16px;
}
.header .nav-header #navigation li .sub-nav-wrapper .sub-nav {
width: 150px;
margin-top: 10px;
background: white;
border-top: 1px solid #91918e;
box-shadow: 0 1px 2px #91918e;
-moz-box-shadow: 0 1px 2px #91918e;
-webkit-box-shadow: 0 1px 2px #91918e;
}
.header .nav-header #navigation li .sub-nav-wrapper .sub-nav:first-child { border: none; }
.header .nav-header #navigation li:hover .sub-nav-wrapper { display: block; }
.header .nav-header #navigation li .sub-nav-wrapper .sub-nav li {
list-style: none;
display: block;
margin: 0;
padding: 0;
text-align: left;
border-bottom: 1px solid #91918e;
}
.header .nav-header #navigation li .sub-nav-wrapper .sub-nav li:last-child { border: none; }
.header .nav-header #navigation li .sub-nav-wrapper .sub-nav li a {
display: block;
color: #242526;
text-decoration: none;
text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white;
padding: 11px 20px;
font-size: 12px;
font-weight: 600;
box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
-moz-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
-webkit-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
}
.header .nav-header #navigation li .sub-nav-wrapper .sub-nav li:hover {
background: #dcdbd2;
}
.header .nav-header a, #navigation li .sub-nav-wrapper .sub-nav li { }
.header .nav-header #navigation li .sub-nav-wrapper {
pointer-events: none;
opacity: 0;
filter: alpha(opacity=0);
top: 0;
}
.header .nav-header #navigation li:hover .sub-nav-wrapper {
pointer-events: auto;
opacity: 1;
filter: alpha(opacity=100);
top: 15px;
}
</style>
<section class="header">
<nav class="nav-header">
<ul id="navigation">
<li>
Home
</li>
<li>
Portfolio
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li>Graphics</li>
<li>Web</li>
<li>Print</li>
</ul></div>
</li>
<li>
Services
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li>Web Design</li>
<li>SEO</li>
<li>Content Writing</li>
</ul></div>
</li>
<li>
Technology
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li>JavaScript</li>
<li>HTML/CSS</li>
<li>Drupal</li>
<li>Joomla</li>
<li>Wordpress</li>
<li>MySQL</li>
<li>Oracle</li>
</ul></div>
</li>
<li>
About
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li>Location</li>
<li>History</li>
<li>Jobs</li>
<li>Awards</li>
</ul></div>
</li>
<li>
Contact
</li>
</ul>
</nav>
</section>

Answer 1

You're going to need to add a child to the .header element with a z-index: -1, and make sure the .header has the CSS position: relative;
Here's a working jsfiddle of your code working the way you want.
To your markup, as the first child of .header I added:
<div class="inner-header"></div>
And to your CSS, I added at the bottom:
.header {
background-image: none;
background-color: transparent;
position: relative;
}
.inner-header {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/7/7d/Haeckel_Siphoneae.jpg');
background-size: 100% auto;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}

Answer 2

How about this: http://jsfiddle.net/Xm5BE/
Here is the HTML:
<header>
<div class="nav">
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</div>
<div class="header">This is the header bg div</div>
</header>
and the CSS:
header { background:black ;
width:100% ;
height:200px ;
position:relative ;
}
.header { position:absolute ;
left:0 ;
top:0 ;
width:100% ;
height:200px ;
background:blue ;
z-index:100 ;
}
.nav { width:100% ;
height:28px ;
background:yellow ;
position:relative ;
top:120px ;
z-index:500 ;
}
.nav ul { margin-left:0 ;
padding-left:0 ;
list-style-type:none ;
text-align:center ;
}
.nav li { display:inline ;
}
.nav li a { padding:0px 8px ;
line-height:28px ;
font-size:14px ;
font-family:arial ;
}