[html] CSS centred header image

I have a header image that repeats across screen, so that no matter the screen resolution the header is always stretched 100%, I have placed the image inside a wrapper div. Over the top of that DIV I also wish to place the 'logo' such that it is always centred across the top of the screen.

I appreciate this could be done another way and have already tried just having the logo on top of the header in photoshop although i couldn't get the image centred as I would of wished.

Please find my code below:

HTML:

<div id="wrapperHeader">
    <div id="header">
             <img src="images/logo.png" width="1000" height="200" alt="logo" />
    </div> 
</div>

CSS:

#wrapperHeader{
    position: relative;
    background-image:url(images/header.png);
}

#header{
    left: 50%;
    margin-left: -500px;
    background:url(images/logo.png) no-repeat;
    width:1000px;
    height:200px;
}

Also, I am aware of the properties of margin-left:auto; etc. Although I would be grateful if anyone could explain how to use them appropriately here.

Thanks!

you don't need to set the width of header in css, just put the background image as center using this code:

background: url("images/logo.png") no-repeat top center;

or you can just use img tag and put align="center" in the div

If you set the margin to be margin:0 auto the image will be centered.

This will give top + bottom a margin of 0, and left and right a margin of 'auto'. Since the div has a width (200px), the image will be 200px wide and the browser will auto set the left and right margin to half of what is left on the page, which will result in the image being centered.