title: CSS: header bg image position
body: <p>i'm currenty developing a website, and i have a problem on the header background, so the header that i'm making is:</p>
  
  <p><a href="http://i.imgur.com/h1JLm9A.jpg" rel="nofollow">http://i.imgur.com/h1JLm9A.jpg</a></p>
  
  <p>and currently i have this:</p>
  
  <p><a href="http://i.imgur.com/LgF6HXm.jpg" rel="nofollow">http://i.imgur.com/LgF6HXm.jpg</a></p>
  
  <p>I'm trying to put a background image on the header, but to have the correct positioning of the image, it can not be in the header, because the image is also showing out of the header. how can i do this? i try to use z-index but don't works.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="container"&gt;            
  &lt;div id="header"&gt;  
          &lt;div id="logo"&gt;
              &lt;a href="http://localhost/Yazigi/"&gt;&lt;img src="http://localhost/Yazigi/wp-content/uploads/2013/01/logo.png" width="155" height="85" alt="Yazigi – Araçatuba"&gt;&lt;/a&gt;
          &lt;/div&gt;        
  
              &lt;span class="site-description ir"&gt;Você cidadão do mundo&lt;/span&gt;
              &lt;form method="get" id="searchform" class="search" action="#"&gt;
                  &lt;input type="text" class="search_input" name="s" id="s" placeholder="Procure aqui"&gt;
                  &lt;input type="submit" class="search_bt ir" name="submit" id="searchsubmit" value=""&gt;
              &lt;/form&gt;
  
              &lt;ul class="menu l_tinynav1"&gt;
                  &lt;li class="current_page_item"&gt;&lt;a href="http://localhost/" title="Início"&gt;Início&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="page_item page-item-2"&gt;&lt;a href="http://localhost/Yazigi/?page_id=2"&gt;Página de Exemplo&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container {
  margin: 0 auto;
  max-width: 960px;
  padding: 0px 25px;
  }    
  #header {
      height: 232px;
      background: url(images/topbg.jpg);
      margin: 0;
  }
  </code></pre>