How do I place a background image?

I want an image instead of a solid color change. I've searched and tried a couple of things pertaining to wrapper images, or side and center box images, but I can't seem to find where to just set the background.

Where exactly do you want the image?

stevesh:

Where exactly do you want the image?

I want it to cover the whole background, behind the header (I have a transparent header).

It would also need to go behind the category boxes, etc...

Here's some bits and pieces of the stylesheet in use on the Fan Odyssey site in my sig which uses a background image.

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

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

#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;
	}

HTH!

Thank you Mary Ellen!! I did that, and it worked!

Now, I have the background and I put in my new header, but there is something funny going on. I'm not sure if I'm supposed to post this in a new thread because it's a new topic, but I'm going to ask here. If you want me to delete and start a new one let me know =)

I put in my new header, but the old one was still showing as well. I deleted the image files from the old header, but now it's showing a box with a red x instead. I searched and found directions for how to center my header, but when I tried it centered that little box with the red x instead.

You can see what I'm talking about at trueharttreasures.com.

That image is coming from includes/templates/template_default/images/header4.jpg where Zen Cart appears to be expecting to find your logo.

Check what's defined in includes/languages/english/YOUR_TEMPLATE/header.php in the section below (highlighted in red):

// added defines for header alt and text
  define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');
  define('HEADER_SALES_TEXT', 'TagLine Here');
  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'logo.gif');

Yes! That took care of it! Now, I just changed that red section to the filename of my logo, so now it is there, but also in the css sheet. Is that the way it's supposed to be?

And do you have any idea for why that didn't center? Do I need to add something to that php, or is that still a stylesheet thing? Here is what I did:

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;}

#logo {text-align: center;}

I'm still trying to get this logo centered. Did I enter that code wrong? Or in the wrong place maybe?

I'm not sure, but try

#logo {align: center;}

text-align is aligning the text, not the image.

afo:

I'm not sure, but try

#logo {align: center;}

> 
> text-align is aligning the text, not the image.


Nope:dontgetit

:oops: My mistake. You were right the first time. https://www.zen-cart.com/tutorials/index.php?article=125

Where exactly in the code should this be? I wonder if I have it in the wrong spot?

afo:

:oops: My mistake. You were right the first time. https://www.zen-cart.com/tutorials/index.php?article=125

Ok! That must be where I got it then.

Here's my code:

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float:left;
}
#logo {text-align: center;
}

It's not doing anything on the site though :dontgetit

LOL! I noticed when I pasted that on there that I still had one thing floating left. Thought it would be great now. Changed it to this:

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
text-align: center;
}
#logo {text-align: center;
}

But it still didn't do anything:wacko:

The logo you're using is wider than the site which is why it's not working. It can't center it because it's too big to center.

afo:

The logo you're using is wider than the site which is why it's not working. It can't center it because it's too big to center.

Ahhhhh!! How do you know these things?!

What size does it need to be? The 760x110 as seen here? :https://www.zen-cart.com/tutorials/index.php?article=124

I resized the header in photoshop, uploaded it to the server, changed the image name and sizing numbers, and all it did was show a second one over the first. Neither was centered. I deleted the new one and went back to the first. WHAT am I doing wrong?! The header should be one of the easy parts! LOL!

It's FIXED!!!!

A friends husband suggested the following. I tried it and it took care of the problem!!

In this stylesheet:

includes/templates/mostlygrey/css/stylesheet.css
find the block that begins with:

#logoWrapper {

and inside that block, try adding:

margin: auto;

Since you are specifying a width for that block, that should tell it to automatically balance the margins on either side which should center the box.

:clap: