WebPage with multiple background images

Hello,

I'm trying to apply different background images to 3 divs in my page : #header , #container and #footer. I also want to have my page centered, with a maximum width of 900 px. Here is an image that explains this :

http://f.cl.ly/items/cd4fc4c0a52e26cdb4fe/screen.png
(each color represents a background image)

I'm having some difficulties : when I set the maximum width in my stylesheet like this : body { max-width:900px; } , the background image applied to the divs don't fill all the width, I have something like this :
http://cl.ly/20VK/content

Can someone help me ?

The CSS part:
body, html {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ff0000;
}
#container {
margin: 0px auto;
padding: 0px;
width: 900px;
}
#header {
background-image:url('image_url_here');
}
#content {
background-image:url('image_url_here');
}
#footer {
background-image:url('image_url_here');
}

The HTML Part:
<div id="container">
<div id="header">
Header Here</div>
<div id="content">
Content Here</div>
<div id="footer">
Footer Here</div>
</div>