Translucent divs

Hi guys, i’m a noob at this so please bear with me. i’m really interested in resources which would help me learn about alpha-opacity and their uses for making “floating” divs. i’ve made some graphic wrappers for my site and they contain alpha information, it APPEARS they are translucent but when i try to define a background in the page’s body, the background .jpg doesn’t extend into the divs i defined… you can clearly see a square box around them?

here are the CSS

body {
background: url(images/background.jpg);
margin:0;
padding:0px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

#headd {
margin: 0 auto;
border: 0px solid #999;
background: url(images/head.png);
position: center;
padding-left: 100px;
width: 616px;
height: 420px;
}

#wrapper {
position: relative;
padding: 0;
margin: 0 auto;
width: 716px;
background: #f7f7f7 url(images/wrap.png) repeat-y;
text-align: left;
}

#footer {
clear: both;
background: #e7e7e7 url(images/footer.png) no-repeat;
height: 80px;
line-height: 80px;
width: 716px;
font-size: 0.8em;
text-align: left;
vertical-align: top;
}

Help!