CSS centred header image

Question

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    lt div id  wrapperHeader  gt       lt div id  header  gt                lt img src  images logo png  width  1000  height  200  alt  logo    gt       lt  div gt    lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

I think this is what you need if I m understanding you correctly    lt div id  wrapperHeader  gt    lt div id  header  gt     lt img src  images logo png  alt  logo    gt    lt  div gt    lt  div gt     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

[html] CSS centred header image

Examples related to html

Examples related to css

Examples related to image