Add background images to div (Dynamic content)

I have a DIV ...

<div id="content">

</div>

Now...In the design and if you think of it as a rectangle has the top as a header and also the footer is different so I cannot just create a 1px background image and repeat it.

I would have to do something like:

<di开发者_如何转开发v id="content">
<div id="header">This will have a fixed bg image</div>
<div id="body-content">This will have a repeated bg image and it's the part that can grow.</div>
<div id="footer-content">THis will content a fixed bg image for the footer</div>
</div>

Can anyone advise on the best way to handle this kind of design CSS wise please?

---

#header
{
   background-image: url('header.png');
   background-repeat: no-repeat;
}

#body
{
   background-image: url('body.png');
   background-repeat: repeat-y;
}

#footer
{
   background-image: url('footer.png');
   background-repeat: no-repeat;
}