Adding your own background image

I am using cherry zen and would like to have my background as an image rather than a blue. I can see how to change it from blue to another colour but not to add an image (like repeating dots like in my logo)

Can anyone tell me if there is a way to do this?
Thanks in advance

Bec

https://www.babychilli.com.au

Very simple. In the same place you changed the color, add this line.

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

Replace myimage.jpg with the name of the image you want to use.

afo:

Very simple. In the same place you changed the color, add this line.

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

> 
> Replace myimage.jpg with the name of the image you want to use.

thank you, where would I save my image? would it be a link to an external site like photobucket or would I save it in my directory?  im currently saving all images in an external site

the images would get saved into inlcudes/templates/YOUR CUSTOM TEMPLATE/images

Save it in your Zen Cart directory as /includes/templates/your_template/images/myimage.jpg (replacing the placeholder names with your real ones).

Like Ooba said :)

i have now saved the image in images but would my text in CCS be:
body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #e5edf5; background-image: url('../images/myimage.jpg');
}

or delete background-color: #e5edf5 and replace it with background-image: url('../images/myimage.jpg');
(my image being my image file and change the location)

?

You can keep the background color. That's how I did it on the Fan Odyssey site in my sig. I have black as the background color and have a background image defined. If the image is slow to load, the background will already be the predominant color of the background image.

background-color: #000000;
background-image: url('../images/space011.jpg');

You can have both bg color and image if you want. If the image does not cover all of the space for whatever reason, the color will show through. You would best do this like

background: #e5edf5 url(../images/myimage.jpg);

and you can also specify tiling characteristics (no-repeat, repeat-x, repeat-y or repeat), start position, etc.

background: #e5edf5 url(../images/myimage.jpg) top center repeat-x;

gjh42:

You can have both bg color and image if you want. If the image does not cover all of the space for whatever reason, the color will show through. You would best do this like

background: #e5edf5 url(../images/myimage.jpg);

and you can also specify tiling characteristics (no-repeat, repeat-x, repeat-y or repeat), start position, etc.

background: #e5edf5 url(../images/myimage.jpg) top center repeat-x;

thanks guys, I wanted to tile it so that will work great

much appreciated :)

hmm hit a snag :(

I changed it in /includes/templates/template_default/css but it did nothing ?

I checked in the /public_html/includes/templates/cherry_zen/css file but this stylesheet looks very different to the one I was just in ie:
/**

• Main CSS Stylesheet
• @package templateSystem
• @copyright Copyright 2003-2007 Zen Cart Development Team
• @copyright Portions Copyright 2003 osCommerce
• @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
• @version $Id: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $
  */

/* This section controls the colors for the site. Change red (default) to one of these options: orange, yellow, green, blue, purple, or grey) /
input#searchTop {
background: url("../images/red/rounded-search-input-top.gif") top left no-repeat;
}
#navMainWrapper {
background:url("../images/red/header.gif");
}
h3.leftBoxHeading, h3.rightBoxHeading {
background: url("../images/red/sideboxbg.gif");
}
#navMain a {
background:url("../images/red/tableftE.gif") no-repeat left top;
}
#navMain a span {
background:url("../images/red/tabrightE.gif") no-repeat right top;
}
#navMain a span.last {
background:url("../images/red/tabrightE_last.gif") no-repeat right top;
}
/ end main color changes */

/* other background color or image changes /
body {
background:#84A4C1; / main site background color, blue default /
}
#headerWrapper {
background:#fff; / background color behind logo and sales text, white default /
}
input:focus, select:focus, textarea:focus {
background:#e0e8ef; / background color for input boxes, light blue default /
}
.messageStackWarning, .messageStackError {
background:#990000; / background color for warning messages, red default /
}
.messageStackSuccess {
background:#929292; / background color for success messages, grey default /
}
.messageStackCaution {
background:#FFFF99; / background color for caution messages, yellow default /
}
#cartSubTotal, h2.centerBoxHeading, .rowOdd {
background:#e8e9e9; / background color for the New Product, Featured Products and Specials heading, odd listings, and for the subtotal section in the cart, light grey default /
}
TR.tableHeading {
background:#cacaca; / background color for various table headings (including shopping cart heading), medium grey default /
}
.rowEven {
background:#F0F0F0; / background color for even listings, very light grey default /
}
#navEZPagesTop {
background:url("../images/ezbg.gif") repeat-x; / grey background image behind ezpages section /
}
#contentMainWrapper {
background:url("../images/sidebox.gif") 100% 0 repeat-y; / This is the right column background "faked" with an image. */
background-color:#fff; /*background color for the main "content" of the site /
}
#contentMainWrapperb {
background: url("../images/sidebox.gif") 0 0 repeat-y; / This is the left column background "faked" with an image. */
}
input.search {
background: url("../imag

thats not all of it.
would I have to change it in this one instead? and when I saved my file I did it as:
background: #e5edf5 url(/public_html/includes/templates/cherry_zen/images) top center repeat-x; is that right to include it all like that?

If you have a stylesheet for your custom template, the /template_default/ version will never be used. Make all edits in the /cherry_zen/ copy.
The repeat is optional, as it defaults to "repeat" tiling the whole element, and "top left" starting in the top left corner, which is usually fine for a small bg pattern image.
You don't want to add the partial path information, but you do need the filename:

background: #e5edf5 url(../images/yourimage.gif);

/public_html/includes/templates/cherry_zen is implicitly included when you use
url(../images/yourimage.gif)

gjh42:

If you have a stylesheet for your custom template, the /template_default/ version will never be used. Make all edits in the /cherry_zen/ copy.
The repeat is optional, as it defaults to "repeat" tiling the whole element, and "top left" starting in the top left corner, which is usually fine for a small bg pattern image.
You don't want to add the partial path information, but you do need the filename:

background: #e5edf5 url(../images/yourimage.gif);

/public_html/includes/templates/cherry_zen is implicitly included when you use
url(../images/yourimage.gif)

all thank you, i think the cherryZen stylesheet looks pretty easy to follow, ill do a play tomorrow
I appreciate your help :)

If you use the Firefox browser and have the web developer's add on (and your Zen Cart is on the net), you can play with the stylesheet on the fly and see the results immediately. It's a great tool for getting stuff like this right. It helped immensely when I was doing the background for the Fan Odyssey site. You'll have to save your changes separately and upload (FTP) them to your site to make them permanent.

Hello,

Thanks for that - that web developer tool is excellent.

Kind regards,
Anthony