sketch

Solution1: Container.Top-Content-Bottom

NOTE: ‘position:relative’ and ‘z-index:num’ to fix IE6 issue displaying the image over the content div.

<style>
#container {
    background: url(tile.gif) repeat-y top left;
    width: 600px;
    margin: 30px;
}

    #container #top {
        display: inline;
        float: left;
        background: url(top.jpg) no-repeat top left;
        width: 600px;
        height: 100px;
    }

    #container #content {
        position: relative;
        display: inline;
        float: left;
        z-index: 100;
        margin: -100px 25px -100px 25px;
    }

    #container #bottom {
        position: relative;
        display: inline;
        float: left;
        z-index: 1;
        background: url(bottom.jpg) no-repeat top left;
        width: 600px;
        height: 100px;
    }
</style>

<div id="container" class="clearfix">
    <div id="top"></div>
    <div id="content">content goes here</div>
    <div id="bottom"></div>
</div><!-- END CONTAINER -->

Solution2: Container.Content-Bottom

This soultion used a very tall background image that faded to a background color. A vertical “sliding doors” techinique. Also, note the background image is ‘bottom left’ to fix the image to the bottom of the element so as the content expands more of the image is revealed at the top. This is very similar to the above solution.

<style>
#container {
    width: 300px;
}
    #content {
        display: inline;
        float: left;
        background: color url(container.jpg) no-repeat bottom left;
    }
    #bottom {
        display: inline;
        float: left;
        background: url(bottom.jpg) no-repeat bottom left;
        width: 300px;
        height: 10px;
}
</style>

<div id="container" class="clearfix">
    <div id="content">content goes here</div>
    <div id="bottom"></div>
</div><!-- END CONTAINER -->