CSSを使って、複数の背景画像を組み合わせて表示する

例）

例えばこんなhtmlソースなら、

<h3 id="mc1"><a href="#">キャプション</a></h3>
<ul id="mc2">
<li>コンテンツ1</li>
<li>コンテンツ2</li>
<li>コンテンツ3</li>
</ul>
<p id="mc3">文章</p>
 

こんなCSSで画像を読み込んでいく。
※ずれた場合はpositionで位置調整する必要があります。

h3#mc1 {
background-image: url(images/mc1.gif);
background-repeat: no-repeat;
}

ul#mc2 {
background-image: url(images/mc2.gif);
background-repeat: repeat-y;
}

p#mc3 {
background-image: url(images/mc3.gif);
background-repeat: no-repeat;
}

画像を読み込むので、幅(width)、高さ(height)の指定が必要です。
repeat-yで読み込む部分は高さ指定によって、いくらでも可変が可能です。

文字要素にインデントを付けたい場合はこの場合なら「a」をうまく使って、
例えば、

h3#mc1 a {
position: relative;
}

といった感じでh3#mc1と分けることができます。
divをわざわざつける必要はないです。
あとは臨機応変に試行錯誤しながらやる感じで(笑)

僕のプレゼンサイトでは、とりあえずトップページだけ、この形にできています。