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 https://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.

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

if you want to fix the header width problem you can go to
#mainwrapper element and add
min-width: 1100px;
width: 100%;

min-width mean no matter what resolution enter your site will aleast with width 1100px if the resolution is higher than 1100px will auto set to 100% width

The header_bg.gif I dont know how you want it look
http://img353.imageshack.us/img353/9387/printot0.jpg
this is how your site look on my brower it is center and it look nice.

Thanks,

I know it will look good on a larger monitor, but what about somebody using a 14 or 15" monitor. Will they have to scroll left to right to see the whole site or will it automatically fit??

Thanks for the comment on the look of the site JohnsonY, it took me all week to figure out what to do to get the colors I wanted & to come up with a banner image I liked. It is not perfect, but a good one to start with. Printing & Graphic Design is my specialty, ie. website banners, logos and such. But I am constantly working to improve my skills with ecommerce & coding to go with my web design skills.

I just wish I knew the css, php and mySql as good as I know printing & graphics.

John

First resolution is nothing do with monitor size. As i know there most people setting their resolution to 1024 x 768. This mean their screen will only display 1024px width and 768px height content on their brower. Your header_bg is 1100px width that is why some people enter your site need to scroll left to right to see cause 1024px can't fit with 1100px content.

Here 2 ways you can do to fix this!

1. Make your header_bg with smaller size with image software
2. set your header_bg width in css file with 1024px (but this will make your header_bg little "UGLY" haha)

You should reduce the size of your image to 1024width that way with the site width set to 100% everything should fit without needing to scroll to the right.

It won't make any difference what size monitor someone has.

What if I resize it to 1024, and some one has a 17" monitior set to 800x600 or they have a 15" monitor set to 800x600 will they have to scroll?

Your image size takes over all other settings. I don't know anyone that will scroll a screen and will leave your site.

I would use the logo image and float: left; (maybe size 300px wide)

Then use your other image in your
#logoWrapper {
width: 480px;
height: 124px;
background-image: url(../images/header_bg.jpg);
background-position: right;
background-repeat: no-repeat;
background-color: #fff;
}
set the background-color: #fff;

Chop your image up to a total size of 780 to allow the float of a larger screen. This will allow flex.

Thanks for the advice, I will give it a try. Thanks to all who contributed.

John