dyatesupnorth dyatesupnorth - 25 days ago 6
CSS Question

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 centered 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 centered 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!

Answer

I think this is what you need if I'm understanding you correctly:

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



div#wrapperHeader {
 width:100%;
 height;200px; /* height of the background image? */
 background:url(images/header.png) repeat-x 0 0;
 text-align:center;
}

div#wrapperHeader div#header {
 width:1000px;
 height:200px;
 margin:0 auto;
}

div#wrapperHeader div#header img {
 width:; /* the width of the logo image */
 height:; /* the height of the logo image */
 margin:0 auto;
}