Oh and remove all background images apart from the one on #container.
Set the background image like this on #container..
background:url(folder/yourname.fileformat) no-repeat top;
and then set the background-color to #fff.
Also I'd remove the internal CSS and put it in the external stylesheet, just easier for you. And then you could do it like this.
HTML:
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
CSS:
html {
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
background-color:#3C135E;
text-align:center;
}
#container {
width: 800px;
background-color: #fff;
background:url(images/content.jpg) no-repeat top ;
margin: 0 auto;
}
#header {your attributes here}
#navigation {your attributes here}
#content {your attributes here}
#footer {
background-color:#fff;
width:800px;
height:49px;
}
No need to put a DIV inside your footer either. You could just put a P with a class in there instead or just put your font styles in #footer.
Hope this helps you, otherwise just ask.