Header image width 100%?

[Monica79]

After a lot of searching I still haven't been able to get this. How can I make the header image take up the width of the screen? Does my template need to be edited rather than doing it with CSS?

TIA!

[kobra]

Can not see what you have to work with
Post a link to your site

[Monica79]

There is nothing to see really lol. Trust me it's a zen cart install, I've just removed everything. It's the Free Blue template.

http://www.gempra.com/home/

Thanx

[gjh42]

Your logo/header is easily adaptable to a flexible width (unlike many).
Cut it into two pieces and stretch the straight horizontal end of one so they could together cover any possible width.

There are a number of ways you can attach them to be flexible, but you might try using the left one with the name (and not stretched end) as the standard logo, and the right one as the background-image for #logoWrapper. Give #logoWrapper a width of 100% in your stylesheet.

Google for sliding door method for the standard detailed tutorial on this.

[Monica79]

Thanx for the reply. I have used that technique before so I get what you're saying. I still cant seem to get it tho.

I added this to my stylesheet but it doesn't seem to display the image:

#logoWrapper {
width: 100%;
background: url('../images/gempralogo2.jpg') center center no-repeat;
}

If I remove the image from #headerContent then no image is displayed.

#headerContent {
background: url('../images/gempralogo2.jpg') center center no-repeat;
padding-top: 9px;
padding-right: 0px;
padding-bottom: 9px;
padding-left: 0px;
}

I dont know but it is driving me crazy lol.

[kobra]

Your template for some unkown reason is not using logoWrapper yours appears to have 2 #nameWrapper and #headerContent
If this were a ZC compliant template we could point you but as it has created it's own div's you should determine their order and purpose and you can compare to a normal layout looking at a tpl_header.php and then yours