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

[jamesdavid]

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?

[gjh42]

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

[jamesdavid]

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

[barco57]

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"

[pots]

sorry doubled reply took me too long

[jamesdavid]

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.

[jamesdavid]

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.p...ts_-_Annotated