Добавить фоновые изображения в div (динамический контент)

Question

У меня есть DIV ...

<div id="content">

</div>

Теперь ... В дизайне, и если вы думаете о нем как о прямоугольнике, верхняя часть имеет верхний колонтитул, а также нижний колонтитул отличается, поэтому я не могупросто создайте фоновое изображение размером 1 пиксель и повторите его.

Мне нужно было бы сделать что-то вроде:

<div 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>

Может кто-нибудь посоветовать, как лучше всего справиться с таким дизайном CSS, пожалуйста?

Answer 1

#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;
}