<div id="wrapper">
<div id="content">
</div>
<div id="bottom"></div>
</div>
#wrapper {
padding: /*this should be as high as the top.png*/
background: url('top.png') top center no-repeat;
}
#content {
background: url('content-tile.png') top center repeat-y;
}
#bottom {
height: /*this should be as high as the bottom.png
background: url('bottom.png') bottom center no-repeat;
}
This will only shrink or grow with the content. If you need to resize as in responsive, then you are going to have to make separate batches of images for each device size, and add the new background images using CSS media queries...
Cd&