Can't center my header_bg.jpg??????

Hi, I am new to Zen Cart, and have little to no expericence with php.

What I want to do is center the header image (header_bg.jpg), and according to what I read in
Top 10 Questions asked by new Zen Cart™ Users


I should make that change in my stylesheet.css file. But I couldn't find this:
#logoWrapper {
width:760px;
height:110px;
background-image:url(../images/your_header_image.???);
background-repeat:no-repeat;

So I added it at the bottom, which got my image to diplay once
I changed the css file name to match my image file name, only it
is left aligned and I want it to be centered. I tried putting html code
align="center" in there but that didn't work. Any suggestions?

One other question, if my site doesn't fill the width of my screen
can I use an auto width command or 100% for width???

Thanks,
John

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

Also yes you can use 100% to define the width of ur site. it control by ID
#mainWrapper

Do you have a URL for your site?

my url is www.discountprintingservice.com/store

I tried this from the reply by JohnsonY

#logoWrapper {
text-align:center;
width:760px;
height:124px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
}

and it didn't work. I really like zen cart, but it seem very complicated to make your own template, especially trouble shooting something that isn't right.

#logoWrapper {
width:760px;
height:124px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-position: center; delete this declarration
text-align: center; add this declaration
}

find #logo in your stylesheet and make it
float: left

To GoldBuckle please read and type carefully
the element is background-position not background-align or text-align

that is what I see on your site:
#logoWrapper {
width:1100px;
height:124px;
background-image:url(../images/header_bg.jpg);
background-align: center;
background-repeat:no-repeat;
}

it should work cause I already tested before I post out

To clydejones
isn't it text-align: center only work for the content that define the class or id. Not include in the element? I mean text-align: will only control the text and image that in the table that define as "#logowrapper" but not work for the background image position in #logowrapper. If I make a mistake please correct it .

Also do you mind I make some suggestion about your header image?please note that even your site set to 100% width, there still have a problem with your header. As your header the width is 1100px but if ppl visit your site with 1024x768 or 800x600 resoultion then your header image will be still remind 1100px so your site will look like not 100%width. For this problem I suggest you set the site width as 1100px as well.

Quote:

---

To clydejones
isn't it text-align: center only work for the content that define the class or id. Not include in the element? I mean text-align: will only control the text and image that in the table that define as "#logowrapper" but not work for the background image position in #logowrapper. If I make a mistake please correct it .

---

That is correct that is why in a PM to GoldBuckle I indicated a change to background-position.

Okay I tried your suggestion, here is the code I used:

logoWrapper {
width: 1100px;
height: 124px;
background-image: url(../images/header_bg.jpg);
background-position: center;
background-repeat: no-repeat;
}

It is still set to the left. I am dumbfounded as to why. To make the header look better, last night I merged my logo & the background image together with a photo editor, but I would still like to figure out why it won't center. Right now, viewing the site with my 17" monitor, there is about 3/4" extra space on the right side. It is now 1100px wide, but even when it was on 760px wide I tried the backgroun-position: center line and it was still to the left.

As far as the advise on setting the site to 1100px instead of 100%, won't that make the site a set width no matter what monitor size is used to view? I want the site to take up 100% of the monitors width no matter what monitor size it is viewed with. That is why I use 100% for site width. Please correct me if I am misunderstanding this issue.

Thanks,
John