CSS: header bg image position - html

Question

i'm currenty developing a website, and i have a problem on the header background, so the header that i'm making is:
http://i.imgur.com/h1JLm9A.jpg
and currently i have this:
http://i.imgur.com/LgF6HXm.jpg
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.
html:
<div id="container">
<div id="header">
<div id="logo">
<img src="http://localhost/Yazigi/wp-content/uploads/2013/01/logo.png" width="155" height="85" alt="Yazigi – Araçatuba">
</div>
<span class="site-description ir">Você cidadão do mundo</span>
<form method="get" id="searchform" class="search" action="#">
<input type="text" class="search_input" name="s" id="s" placeholder="Procure aqui">
<input type="submit" class="search_bt ir" name="submit" id="searchsubmit" value="">
</form>
<ul class="menu l_tinynav1">
<li class="current_page_item">Início</li>
<li class="page_item page-item-2">Página de Exemplo</li>
</ul>
</div>
</div>
CSS:
#container {
margin: 0 auto;
max-width: 960px;
padding: 0px 25px;
}
#header {
height: 232px;
background: url(images/topbg.jpg);
margin: 0;
}

Answer 1

Why not use an image in your header instead of using a CSS background?
Put it behind the header with an absolute position and some negative z-index and then just margin it where you want it to be.
Here's some code showing this: (fiddle)
<div id="header">
<img src="http://jamesmcgillis.com/upload/google_logo_1_small(1).jpg"/>
</div>
<style>
#header {
height: 232px;
border: solid;
margin-left: 120px;
}
img {
margin-left: -50px;
z-index:-1;
position:absolute;
}
</style>
Is that what you need?

Answer 2

You have many different approaches here, but probable the most cross-browser compatible would be this:
1. In html: create an outer div, (of course, with 100% width) and add to it the map/drawing image background.
<div id="outer-container">
<div id="container">
<div id="header">... etc
</div>
</div>
</div> <!-- outer-container-->
2. In css:
a) Add the gradient image to the body with background property.
b) Add the map / drawing image to the outer-container with background property.
body {
background: (your-gradient-gray-image.jpg) repeat-x;
}
#outer-container {
background: url(images/topbg.jpg) no-repeat center top;
}