I'm not going to make the obvious move of asking you if you know who you've been talking to but, instead, ask you to give us a look or a better description of what you have been doing.
The tile_back.gif is meant to be a simple graphic slice of a pre-determined size that will repeat as necessary to fill a specific area or areas. The background-color associated with it in the CSS is only there to prevent a blank spot while the image is loading. Most high-speed connections don't ever see the color. Also, most folks want the areas presented by tile_back.gif to look the same. That's the reason for placing it in so many css calls.
If you wish to have different background images for the navMainWrapper and navCatTabsWrapper (for example), you will need to create them and change the css to break them apart and put their respective files with them in their own call.
HTML Code:
#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%;
}
could become
HTML Code:
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}
#navMainWrapper {
background-color: #000000;
background-image: url(../images/tile_back_navMain.gif;
}
#navCatTabsWrapper {
background-color: #FFFFFF;
baclground-image: url(../images/tile_back_navCatTabs.gif;
}