How Do I Centre My Header Onto My Background?

[Newmanz]

Hello guys,
Really love playing around with ZenCart but for the life of me can not seem to figure out the edit header for version 1.3.7
My website is www.newmanz.co.nz/zen

I want to centre my header picture onto the background which hopefully with the correct background colour, will merge nicely. So far all I am getting is a left aligned header picture onto my background.

#1 I tried

#logoWrapper {
width:760px;
height:110px;
background-image:url(../images/your_header_image.???);
background-repeat:no-repeat;
}

but couldnt find #logoWrapper within the stylesheet, I did find #headerContent
so figured I would play with this, resulting in

#headerContent {
width:1200px;
height:220px;
background:#1a7fb7 url('../images/header-bg.jpg');
background-repeat:no-repeat;

}

So as you can see I have made a hack job, forgot the original code for the freeblue template, couldn't find any way to use
centre centre no-repeat;
and am now tearing small parts of my hair out at 3am in the morning.

Help me OB1, your my only hope !!!!!!
ps: i tried adding in the code

#logoWrapper {
width:883px;
height:220px;
background-image:url(../images/images/header-bg.jpg');
background-repeat:no-repeat;
}

but nothing changed....

[kuroi]

Just replace your #headerContent styles with this

#headerContent {

width:1200px;
height:220px;
background:#1a7fb7 url('../images/header-bg.jpg') center no-repeat;

}

Width:1200px? Bad idea, this means that most visitors will not be able to see your whole site as 1024px is still the most common monitor width.

[Newmanz]

Your a legend, cheers !!!!!!!

[Newmanz]

Just replace your #headerContent styles with this
Width:1200px? Bad idea, this means that most visitors will not be able to see your whole site as 1024px is still the most common monitor width.

Cheers have now changed to 1024px 220px

[kuroi]

Cheers have now changed to 1024px 220px

Actually, I'd take the width off altogether. The rest of your template is liquid. I'd let the header flow with everything else.

If you wanted a fixed width, apply it to the #mainWrapper rather than the header alone and no more than 980px as you need to allow some room for browser window borders and scrollbars.

[Art Of J Luis Lozano]

Hi I am having sort of the same problem with my site. I don't have it live yet, but the logo is not centering or filling the span at the top. I am using the same original green style template with modifications. I am using only a w75 x L720 image as the logo and have disabled the text message. Perhaps I disabled something more or less?

It appears that the top logo, background etc., are stopping at about where the right sidebox columnn begins. The bottom colour bar also stops at the same place. And as I change the settings the logo either stretches or appears half covered up.

I have tried many different iterations of the codes from my css files as follows:


/*wrappers - page or section containers*/

#mainWrapper {
background-color: #000033;
width:720px;
vertical-align: top;
border: 1px solid #9a9a9a;
}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}


#logoWrapper{
background-image: url(../images/headerlogo.jpg);
background-repeat: no-repeat;
background-color: #000099;
width:100%;
height:75px;
}
-------------

Can you help? Am I in the right vecinity or ?

Thanks again.

Art of JLL