Question

i’m currenty developing a website, and i have a problem on the header background, so the header that i’m making is:

https://i.stack.imgur.com/1SxUJ.jpg

and currently i have this:

https://i.stack.imgur.com/yzvn8.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">
            <a href="http://localhost/Yazigi/"><img src="http://localhost/Yazigi/wp-content/uploads/2013/01/logo.png" width="155" height="85" alt="Yazigi – Araçatuba"></a>
        </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"><a href="http://localhost/" title="Início">Início</a></li>
                <li class="page_item page-item-2"><a href="http://localhost/Yazigi/?page_id=2">Página de Exemplo</a></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?