Adding your own background image

[bchilli]

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

www.babychilli.com.au

[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.

[bchilli]

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

[Ooba_Scott]

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

[gjh42]

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 :)

[bchilli]

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)

?

[afo]

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');

[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;

[bchilli]

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 :)

[bchilli]

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?