For anybody curious about how a complex image, such as this website’s post background (a pad of paper) or the sidebar widgets (sticky notes), can resize without breaking the image, read on:

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.