Header / Footer Color Transparancy

[JSY SH466Y]

My site is www.creative-soaps.com and I am playing with stylesheet.css and background images. My question is how do I set just the header and footer to transparent without affecting the main body? I have thus far managed to make the whole page transparent but cant isolate the header and footer.
I'm using firefox addons like firebug to locate #NavWrapper and #LogoWrapper.

Thanks in advance

[gjh42]

Make #mainWrapper, #headerWrapper and #navSuppWrapper (and any required sub-elements) transparent, and set the background you want for #contentMainWrapper (the whole section between header and footer).

[JSY SH466Y]

Hi,
I've made those changes as can be seen on the site now but I think the css may be grouping the header and the main body meaning when I change background-color: #fffff to #transparent it makes the whole lot transparent.

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
background-color: #ffffff;
margin: 0em;
padding: 0em;
}
.topper-menu li {
font: 11px verdana;
float: left;
margin: 9px 2px 0 14px;
}

It also leaves two bands of white around the banner.

[JSY SH466Y]

solved the two white parts. I hadn't changed the logo wrapper

[JSY SH466Y]

Fixed it thanks - I hadn't closed the parenthesis } off.
This is the chaneg I made.

#headerWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
background-color: #transparent;
margin: 0em;
padding: 0em;
}

.topper-menu li {
font: 11px verdana;
float: left;
margin: 9px 2px 0 14px;
}
#contentMainWrapper{
background-color: #ffffff;
}

Thanks for the help