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

[Resqjock]

What is the standard/default width and height of the logowrapper and header??

SK

[kobra]

What is the standard/default width and height of the logowrapper and header??

As this can be template specific and you have not provided any details for your site, your version of ZenCart, basically nothing:

By default(if you are using a template that has not altered it) logoWrapper is contained within the mainWrapper and inherits what ever width it specifies. Height is normally auto detected if there is an image contained

[Resqjock]

As this can be template specific and you have not provided any details for your site, your version of ZenCart, basically nothing:

By default(if you are using a template that has not altered it) logoWrapper is contained within the mainWrapper and inherits what ever width it specifies. Height is normally auto detected if there is an image contained

Sorry, for not providing the info.

I am running ZC 1.3.8a and I have not altered anything with regards to the header image area.

What i want to do is place my logo image so it spans the total width of the header/mainwrapper. I had to reduce my current logo image to show completely. If I kept the image at its orginal size it gets cut off. here is a link to my site and I think you will know what I am talking about http://www.htpradios.com/store

Can anyone help with this??

Stan

[kobra]

Not sure what you have going on???
In IE - I see one smaller centered image with the large behind it

In FF - I only see the small centered image but there is another image - header_bg.jpg - that is not readily visible as a background image that states "Impact Radio Accessories.

#logoWrapper{
	background-image: url(../images/header_bg.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	height: 100px;
}

You have the main wrapper set to 1050px and for a 1024 wide display this will always represent a scroll bar.

Try setting this to about 990 to 1000px and adjust your image to match this width