Ich denke ich habe es gelösst:

http://jsfiddle.net/nhtdupjb/9/

Für Hinweise auf ein besseres Vorgehen würde ich mich freuen

<div id="header">  
    </div>  
<div id="box1">a  
</div>  
<div id="box2">b  
</div>

html, body {  
padding: 0;  
margin: 0;  
height: 100%;  
}  
  
  
#header {  
background: url("http://magazin.salzburgerland.com/wp-content/uploads/2012/08/hochkonig-007.jpg") no-repeat center center;  
-webkit-background-size: cover;  
-moz-background-size: cover;  
-o-background-size: cover;  
background-size: cover;  
height: 100%;  
}  
  
#box1 {background:#ff0000;height:400px;}  
#box2 {background:#c0c0c0;height:400px;}