Header image width 100%?

07 Mar 2009, 18:35

#1

New Zenner

Join Date:: Feb 2007
Posts:: 43
Plugin Contributions:: 0

Header image width 100%?

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!

07 Mar 2009, 22:12

#2

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: Header image width 100%?

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

08 Mar 2009, 17:06

#3

monica79

New Zenner

Join Date:: Feb 2007
Posts:: 43
Plugin Contributions:: 0

Re: Header image width 100%?

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

08 Mar 2009, 17:52

#4

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Header image width 100%?

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.

08 Mar 2009, 18:19

#5

monica79

New Zenner

Join Date:: Feb 2007
Posts:: 43
Plugin Contributions:: 0

Re: Header image width 100%?

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.

08 Mar 2009, 18:29

#6

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: Header image width 100%?

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

13 Mar 2009, 01:19

#7

resqjock

Zen Follower

Join Date:: Aug 2008
Posts:: 114
Plugin Contributions:: 0

Re: Header image width 100%?

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

SK

13 Mar 2009, 03:18

#8

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: Header image width 100%?

Resqjock:
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

22 Mar 2009, 19:45

#9

resqjock

Zen Follower

Join Date:: Aug 2008
Posts:: 114
Plugin Contributions:: 0

Re: Header image width 100%?

kobra:
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

22 Mar 2009, 20:16

#10

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: Header image width 100%?

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

23 Mar 2009, 06:27

#11

resqjock

Zen Follower

Join Date:: Aug 2008
Posts:: 114
Plugin Contributions:: 0

Re: Header image width 100%?

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

I know, I was researching on how it would look at the time you viewed my site.

I added the image to my css, but what I got was a "tiled" image that repeated itself while spanning the width of the header.
I put "no repeat" in the css class, but I still got the tiled effect. (exact duplicate image on the left edge and on the right edge).

If you click on my link now, you will see what I want to do. Fill in the white spaces to the left and right of my logo with one image that resembles my current logo in the center.

Stan

23 Mar 2009, 07:35

#12

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: Header image width 100%?

I put "no repeat" in the css class, but I still got the tiled effect. (exact duplicate image on the left edge and on the right edge).

Needs to be

background-repeat: no-repeat;

Fill in the white spaces to the left and right of my logo with one image that resembles my current logo in the center.

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