background image position

[Shinmai]

Hi there,
I hope this is right place to ask this question.
I am working on changing background of my ZenCart and I just realized that background is just right for the home page but height changes as I open other pages (width is fine). My background (1800 x 1800) has three colors across and second line is just positioned as same height as my navigation bar right under my header image (800 x 180). When I open other pages with longer content, the height of the background changes so that second/third lines go way lower and doesn't line up with the navbar.

Currently my stylesheet is set as below.

body {
margin: 5px 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 58%;
color: #666666;
background-image: url(../images/muteki_background.gif);
background-position: center;
background-repeat: no-repeat;
}
/* Desert Noon Template Layout*/
/*BOF Main Wrapper - Wraps the contents of the layout*/
#mainWrapper {
margin: 0 auto;
background-color: #000000;
text-align: left;
width: 800px;
border: 1px solid #000000;
border-width: 0 1px 0 1px;
vertical-align: top;
}
/*EOF Main Wrapper*/
/*BOF Header layout*/
#headerWrapper {
margin: 0;
padding: 0;
}

Do I change the background-position to "relative"? Should I make background size bigger?
I am newbie and I am not sure how to correctly set background without messing other stuff It will be great if someone could let me know how to set the background so that it stays same as I have it for the home page.
Thanks.

[kobra]

Post a link so that we can see whot you are dealing with
Also your viewing resolution

[Shinmai]

Hi,
My screen is 1366 x 768. I just started to customize my shop and it is not live yet so I'm afraid I can't post the link... I just installed PayPal IPN, Canada Post and started to tackle storefront.

Basucally, the background is simple three horizontal colors. Top is 180 px high Black horizontal line that matches my header logo hight, then White horizontal line that is same height as navbar, then rest is Red underneath.

If I put background-position to"relative", would it make the background stay the same size (fixed position) and it won't expand the height??? If so, would I need some other code in stylesheet to make this work?

Thanks!

[Shinmai]

I just changed my background to vertical lines (on both side of main column) so that I don't have to deal with this problem. Actually the design turned out to be pretty good.

I will change to horizontal design when I am more comfortable with css.