How to use an absolute background image?

[minson]

I want to use a background image on the main part of the page (to each side of the actual store, ya know, the main body background)

I have it on the other part of my site, but I can't quit get it intergrated into the store pages.

Here is what the css for it looks like:

body {
    margin: 20;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 62.5%;
    color: #000000;
    background-color: #646263;
    background-image: url(../images/background.jpg);
    }

#bgImage 
{
    width:     100%;
    height:     100%;
    left:         0px;
    top:         0px;
    position:     absolute;
    z-index:     0;
}

One the other html pages on my site, I place the following code to make this appear as the background image:

<div id="bgImage" align="center">
<img src="background.jpg" style="width: 100%; height: 100%;">
</div>

How can I do this within the store setup?

TIA!

[kobra]

Don't know what your image looks like....I ahve some that range from 3x3px to 200x200px tiles that repeat horiz & vert.

It is the same as your body entry that you posted but in the stylesheet.css file for Zen Cart and the template that you are using.

[minson]

The image is actually stretched to fit the background on the page.

Take a look at www.tailormaidbowstrings.com/links.html to see what I mean.

[kobra]

You referring to the gray gradient background??

[barco57]

Use the attached jpg (gleaned from your site) place it in includes/templates/YOUR_CUSTOM_TEMPLATE/images folder

Then in your stylesheet in the body statement add the following
background-image: url(../images/bkgrd.jpg);

and also set the background-color to match the bottom of the background image

[gjh42]

You have two kinds of images going on with the code you show - a background image in your CSS body declaration, and a foreground image placed/stretched on top of it. You don't need both.

Using the stylesheet code Mike gave you will do the whole job the best way.

[minson]

Thanks Mike.

I gave that a try, but all that it did was tile that image, not stretch it over the whole thing in one solid big piece.

[barco57]

ok scale that image vertically.....stretch it....til it starts to look bad or create a new gradient that is tall and thin close to what you expect your store to be in height and than you also have to add background-repeat: repeat-x; to the stylesheet right below the background-image declaration to keep the image from tiling vertically. Make sure the body background-color is set to what ever the color is at the bottom of the image so that the two blend together. What your looking to do with stretching the smaller image doesn't work in css.

[minson]

Thanks barco57, I did that and now it is close. Closer than I was before.

I do use CSS with the smaller image on the rest of the site and it does work. The gradient image for the rest of the site is 333 wide & 250 tall.

I then place the following code in my css files

#bgImage 
{
    width:     100%;
    height:     100%;
    left:         0px;
    top:         0px;
    position:     absolute;
    z-index:     0;
}

and this just after the body tag in the HTML file:

<div id="bgImage" align="center">
<img src="background.jpg" style="width: 100%; height: 100%;">
</div>

I wanted to try to do that with the ZC files, but I couldn't figure out which file to put he div id into.

[barco57]

The css by itself will not stretch the image, its the inline styles in your html that are doing the stretching. If you want to play with this you will have to mess around in includes/templates/YOUR_CUSTOM_TEMPLATE/common/tpl_main_page.php