How do I center the header?

[tolefairy]

this is what I currently have on my stylesheet:

#logoWrapper{
    text-align:center;width: 100%;
    background-image: url(../images/newHeader.jpg);    
    background-repeat: no-repeat;
     background-color: #fdfbee;
    height:169px;
    }

I would like the header to be centered...........

http://www.craft-patterns-online.com

many thanks!

[misty]

http://www.zen-cart.com/forum/showthread.php?t=79342
Previous thread above will help

[clydejones]

this is what I currently have on my stylesheet:

#logoWrapper{
    text-align:center;width: 100%;
    background-image: url(../images/newHeader.jpg);    
    background-repeat: no-repeat;
     background-color: #fdfbee;
    height:169px;
    }

I would like the header to be centered...........

http://www.craft-patterns-online.com

many thanks!

add this to the above declaration:

background-position: 50% 50%;

[tolefairy]

thanks much, but doesn't mine already say text-align:center?

[tolefairy]

thanks Clyde.........I'll give it a try!

[clydejones]

thanks much, but doesn't mine already say text-align:center?

Yeah but that won't center align a background image, it would only center align a separate logo if you had one.

[tolefairy]

thank you, Clyde! That did it!

[clydejones]

Glad to help.

[Skittlebiscuit]

I seem to have the same trouble as the original poster of this thread. I can not get my image to center on the page.

I can manipulate the image using the properties contained in #logoWrapper in my stylesheet so I know that the properties listed below actually do work with the image displayed on my page. I have used the float property and moved the image from left to right. But I want it centered. So, I inserted the "background-position:50% 50%" property as described earlier in this thread and nothing changed. I thought perhaps the image was too wide and reduced its displayed size but that didn't help either. Any other ideas would be greatly appreciated.

from my stylesheet:

#logoWrapper {
width:656px;
height:199px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
}

Website is www.charlestonislandscreations.com/catalog.

[Skittlebiscuit]

Firefox displays site w/image centered correctly. Explorer does not. Is Explorer not compatible with the background-position property in CSS?