Div width 100%, achtergrond die mee veranderd met browser

Hallo,

Ik wil graag de header 100% (dus de width: 100% en height: auto) alleen dit lukt niet.

Dat hij mee resized doet het wel alleen ik heb voor de header nog een menu div en dan de header de onder werkt niet helemaal zo als het moet. Je ziet de header nu maar half omdat hij de 100px van de menu ook mee neemt in header height.

Ik hoop dat jullie het snappen, kunnen jullie mij helpen?

CSS:

#headerwrap {
    float:left;
    width:100%;
    margin:0;
    padding:0;
    text-align: center;
}

.headerbox{
    position: relative;
    height: 1200px;
    z-index: 1;
}

#header{
	background-image: url('/images/header.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
}

.menu
{
width: 100%;
height: 100px;
background-color: #000000;
opacity:0.60;
filter:alpha(opacity=60);
}

HTML

	<div class="menu">
		<div class="logo">
		</div>
		<div class="nav">
		Home - BLA - BLA
		</div>
	</div>
	
	<div id="headerwrap" >
        	<div id="header" class="headerbox">
        	</div>
    	</div>

Voorbeeld:


Al vast bedankt