Editing CSS in Dreamweaver, trying to put a background image.

I’m using a template override and im editing the CSS. I’m using Dreamweaver to edit it so I can see all the CSS styles and there names in the CSS Styles window.

What styles controls the background image on the page?

There are a couple of possibilities depending on exactly how your page display is set up. It could be the body {} declaration you need to add your background to, or #mainWrapper {}, or possibly others.

The property you want to use is

background-image: url(../images/yourbg.gif);

and possibly also specifying background-repeat: and background-position:.

I don't know how Dreamweaver works, but if it doesn't show you the class/id of the element, you might try the Firefox Web Developer extension to get information (it also allows you to temporarily edit CSS and see the results instantly.)

I’ve been trying to figure this out for a while now and ive made the following changes to the css, but nothing seems to work;

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
background-repeat: repeat;
}

.centerBoxWrapper {
border: 1px solid #9a9a9a;
height: 1%;
margin: 1.1em 0;
/* create free space at the bottom of the box in which to display the image /
padding-bottom: 20px;
/ add the image to the boxes background /
background-image: url(file:///Macintosh%20HD/Applications/MAMP/htdocs/gemstones/includes/templates/newtemplate/images/backgroundfade.jpg);
/ position the image at the bottom and center of the box /
background-position: center bottom;
/ EITHER set the image to not repeat /
background-repeat: no-repeat;
/ OR set it to repeat horizonatally */
background-repeat: repeat;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(file:///Macintosh%20HD/Applications/MAMP/htdocs/gemstones/includes/templates/newtemplate/images/backgroundfade.jpg);
padding: 0.5em 0.2em;
}

the url to the image should be relative to the stylesheet...so you want it to look like:

/* add the image to the boxes background */
background-image: url(../images/backgroundfade.jpg);

which reads like "to get to the image go up one directory, over to the images directory and there you will find the image"

sorry doubled reply took me too long

By putting the folowing code into
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {

I can make a background image for the navigation bar and footer, but I still cant find where to put it for the main background pages.

code:
background-image: (../images/backgroundfade.jpg);
background-repeat: repeat;
background-position: center bottom;

putting the code into .centerBoxWrapper does nothing.

Is there a resource anywhere that tells you what bits of the CSS do what?

This is not very helpful as it only explains what the rules do, not what they are affecting;
http://www.zen-cart.com/wiki/index.php/Customisation_-_Templates_-_Stylesheets_-_Annotated

The Firefox Web Developer Information > Display Element Information button is the resource that tells you what class/id to edit in the stylesheet for a given element. Since people can make many custom tags for particular situations, a static document would not necessarily be accurate for everyone.

I do agree about the annotated stylesheet - it really needs to have notes on what the selectors represent more than what the properties do.

gjh42:

I do agree about the annotated stylesheet - it really needs to have notes on what the selectors represent more than what the properties do.

Yes, I think that would help a lot of people, including myself.

How do I put a background image in my main page?

Post a link to your site, and/or describe exactly where you want the background. As noted above, there is more than one possibility for this. The Firefox Web Developer can let you find this for yourself.

I managed to figure if out with the firefox tool, thanks a lot for the tip.:smartalec:
james

And you're not going to share what you found out with the rest of us? :wink:

Cant believe im helping someone! Using template override, change stylesheet.css

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
background-image: url(../images/main.jpg);
background-repeat: repeat;
background-position: top;
}

Worked for me but im a bit of a newbie. Good luck.

Firefox Web Developer and Firebug are both great for finding the bit of the CSS you need to change.

As you will notice, this will put the same image into each of the locations in the list. If you only want the image once, or tiled in one continuous sweep instead of several chunks, isolate the element where you want the bg, like this:```
#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

#mainWrapper {
margin: 0em;
padding: 0em;
background-image: url(../images/main.jpg);
background-position: top;
}

"Repeat" is the default, so you only need to specify background-repeat: if you want something other than continuous tiling, like repeat-x, repeat-y, or no-repeat.

What if my background has three images? three separate images to make one, how would I do that? :huh:

If the three images align with parts of your page, you can use them as backgrounds in those parts.
A link to your site and description of exactly where you want the images to appear will let us give useful advice.

http://dawnenchantments.com/demo/

I'm just starting, I want to make sure the background it going to work with what I want.

I have a background that has a top, middle and bottom, I can put the top in but what code would I use for the middle and bottom?

Thanks so much

Get firefox and then install firebug.

Use Firebug to see what divs you want to attach background images to. (You may want to attach just one image to the mainWrapper div).

Set the background image to the divs you want with your css.

You could put the top in #headerWrapper, and the middle in #mainWrapper or #contentMainWrapper, or the body {} declaration. The bottom could go in #navSuppWrapper or #siteInfoLegal, depending on its height. You could also put the bottom in #mainWrapper if the middle is in body or #contentMainWrapper.

The best answer will depend on exactly how high each part of the background image is.