ciao a tutti!

vorrei che il mio header abbia un background che si estenda "all'infinito"
(es. http://creattica.com/ )

ho pensato di realizzarlo così (semplificando):
codice:
<body>
<figure class="header_background"><div></div></figure>
<div class="gridContainer clearfix pos_top">
  <div id="header">
    

This is the content for Layout Div Tag "header"</p>
    

gsrgrs</p>
  </div>
</div>
</body>

/* CSS */

.header_background { 
   position: relative;
   height: 50px;
   background-color: #000;
   z-index: -1;
}

.pos_top {
   clear: both;
   float: none;
   position: relative;
   top: -50px;
}
è corretto? conviene o è solo una gran confusione? che metodo mi consigliate?