Adding a background image behind my ZenCart pages

[vfrazier]

Is it possible to add a background image behind your ZenCart store pages?

IOW, instead of the colored background, AKA wasted space, filler, or edges, I'd like to have my logo or other store related image tiled across the otherwise empty space.

thx

[afo]

You can do that in includes/templates/YOUR_TEMPLATE/css/stylesheet.css.

This is a sample from the stylesheet from the Fan Odyssey site in my sig.

#mainWrapper {
	background-color: #000000;
  background-image: url('../images/space011.jpg');
	text-align: left;
	width: 100%;
	vertical-align: top;
	}

[vfrazier]

Thanks for the help. It worked great.

[afo]

I have that image in various points in the stylesheet which is why it appears as the background to the entire site. If you need the other locations, let me know, but it shouldn't be too hard to figure out.

[vfrazier]

If you can spare a minute, I'd love to know the various locations. This is my first attempt at this type of webstore and I am struggling to get over the hump. Thanks in advance.

[gjh42]

If you have a fixed width page, or space to the sides of the sidebars, you would want to put that background-image in the body {} rule at the very top of the stylesheet.

Anything that has a class or id tag or an HTML element can have a background-image added to it, so there is not a "list" of places as such.

[afo]

Here's all the places I added it for the Fan Odyssey site in my sig. I just copied the code I changed. There'll be other stuff in between.

#mainWrapper {
	background-color: #000000;
  background-image: url('../images/space011.jpg');
	text-align: left;
	width: 100%;
	vertical-align: top;
	}

#logoWrapper{
  background-image: url('../images/space011.jpg');
	background-repeat: repeat-x;
	background-color: #000000;
	height:110px;
	width: 100%;
	}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #000000;
	background-image: url('../images/space011.jpg');
	padding: 0.5em 0.2em;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}

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

.centerBoxWrapper {
  background-color: #000000;
  background-image: url('../images/space011.jpg');
	border: 1px solid #9a9a9a;
	height: 1%;
	margin: 1.1em 0;
	}
.leftBoxContainer, .rightBoxContainer {
  background-color: #000000;
  background-image: url('../images/space011.jpg');
	margin: 0em;
	border: 1px solid #c0c0c0;
	border-bottom: 5px solid #COCOCO;
	margin-top: 0.5em;
	}

.sideBoxContent {
  background-color: #000000;
  background-image: url('../images/space011.jpg');
	padding: 0.4em;
	}

[vfrazier]

Thanks for the help. I'm working on the changes now.

Another thing that I have been looking for is the command that centers your page on the screen. As opposed to having everything left justified.

[gjh42]

text-align: center; will do that. You probably want to put it in body {}.

[vfrazier]

thanks for your help. I've made a lot of progress in the last few days.