The simplest way to do this would really be using a table, with three rows and a single column:

<table>
    <tr>
        <td background="img/top.png"></td>
    </tr>
    <tr>
        <td background="img/middle.png"></td>
    </tr>
    <tr>
        <td background="img/bottom.png"></td>
    </tr>
</table>

The top and bottom cells could be given absolute dimensions, and the middle cell could be given an absolute width but no height, so it can expand to accommodate a large or small amount of content.

This technique comes with drawbacks, though:  the text can only be situated on the center section.  This does not produce a very impressive effect, as it is easy to see how you created the expanding container.  Also, using tables to create a website layout is never a good idea—you should use <div> tags to produce a website’s layout, using <table> tags only for displaying tabled content.

Secondly, if you look at the sticky notes on this page or the torn section of the paper, for example, you see that the text can overlap both the top and bottom images—an effect that can not only prove to be useful, but one that will have visitors and web designers alike wondering “how you got your image to magically expand”.

There is a simple—and more standards-compliant and valid—way to make this “magically resizing container”: using <div> tags.

I decided a while back that I would convert my website, which was at that time in Flash format, to pure HTML, CSS, and PHP. Flash is incredibly unreliable, and to be honest, I needed a change from that cramped layout. So here we are now, in my self-hosted WordPress blog-slash-website.

I began with a beautiful WordPress theme, Nick La’s Notepad. I couldn’t stand not designing my own work, so I instantly started to create a new theme. And here we are! If you see anything unfinished, it is because this blog is in progress (in blog-ress? Nah…).

Other than that, stay posted. Because I will stay here, posting.

- Brandon