How install a background image?

[rjouglard]

I am trying to install a background image to cutomize my website. I got it to work one time and after I modified my image, I couldn't get it to work anymore. The images folder I am using is the main image folder under my domain. Here is what I have in my classic/stylesheet.css
body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #B5EAAA;
background-image: ../images/bkd.jpg;
background-position: right;
}

[dbltoe]

one item....

background-image: url(../images/bkd.jpg);

[misty]

The images folder I am using is the main image folder under my domain.

Should be your classic template's images folder.

[rjouglard]

I tried what both of you have listed. Still nothing. I moved my images to the classic template's images folder. Also I tried this- background-image: url(../images/bkd.jpg); I am missing something somewheres. My website is www.jhpsales.com

[rjouglard]

Thank both of you! I finally got it right. You were both right. I was reading too much into it.

[afo]

You should create your own custom template. If you continue to work in the /classic folders, you'll lose ALL your changes with the next upgrade/update.

[rjouglard]

That is what I am in the process of doing right now. Thank you for your help;

[melena]

Hi Zenners!
I'm customizing my first zen cart, so far so good... I have the custom template folder etc.. I would like my background to be a gradient between 2 colors, ie not 1 color not an image, can anybody help me?
Thanks!

[dbltoe]

It's extremely difficult to put a gradient background in other than a wrapper with a fixed width.

I generally use the mainWrapper (hornedlizardcreationsDOTcom) and use photoshop to create a gradient the width of the mainWrapper and 1 pixel in height.

Name is something like mainWrapperBack.gif and put it in the images folder for your custom template.

Here's an example of the css for the site I mentioned.

#mainWrapper {
background-image:url(../images/mainWrapperBack.gif);
border:1px solid #000000;
text-align:left;
vertical-align:top;
width:925px;
}

You can then add a contrasting background-color to the body tag of the css.

[melena]

Thanks!