Web素材配布サイトなどでよく配布されているテーブル素材をDIVの枠に使ってしまおうというのがここでの目的です。

テーブル用素材なので、大抵の素材が９つのパーツに分かれていると思いますが、それをくっつけて上中下の３パーツにします。
ここでは、Egg*Station様で配布されている素材を使わせて頂きます。


上パーツ

中パーツ

下パーツ

中パーツは厚さが1pxなのでちょっと見にくいかもしれません。
繰り返し指定するので1px以上あればOKです。

HTMLとCSSは以下のように記述します。
まず、widthは背景を指定するパーツで全て同じ値(画像の幅)にします。
heightは上下パーツのみに指定します。
中パーツは縦幅可変なのでheightの指定は不要です。

次に、背景画像の指定です。
それぞれ３パーツに対応する画像を背景に指定します。
繰り返しと画像の位置については以下のようにします。

上：no-repeat left bottom;
中：指定なし
下：no-repeat left top;

上の画像は繰り返し無しで、下にぴったりくっつける為にbottomを指定します。
中の画像は自動で繰り返されます。
下の画像は繰り返し無しで、上にぴったりくっつける為にtopを指定します。

そして、.textクラスに横方向marginを指定します。
これは、背景画像と文字が重ならないようにする為です。
画像の幅を見て調節して下さい。

IEであれば.frame-middleクラスにpaddingを指定してもwidthとpaddingのバグのおかげで上手くいくのですが、他のブラウザでは上手く表示できません。
なので、テキスト表示用のブロック要素を用意して、そちらにmarginを指定しておきます。

完成すると以下のように表示されます。

このテクニックを使えば、よりデザインの幅が広がるでしょう。

ただ１つ注意として、素材を借りてくる時は加工して良いかどうかを確認してから使用して下さい。
大抵の場合は切り取りやサイズ変更程度であれば許可していると思いますけど。