multiple background imagesは背景に複数の画像をそれぞれ表示したり、重ね合わせることができる。さっそく次の６種類の画像を重ね合わせることにした。

?　　

?? 　

IE8はmultiple background imagesをサポートしていないため、PIE.htcを使う必要がある。 ソースコード

<style type="text/css">
section{display:block;}
section.section-main{
    width:480px;
    height:300px;
    border:3px solid #006600;
    border-radius:20px;
    background:url(./bg_01_tl.png) no-repeat,
	        url(./bg_01_tr.png) no-repeat 100% 0,
	        url(./bg_01_top.png) repeat-x,
	        url(./bg_01_btm2.png) repeat-x 8px 100%,
	        url(./bg_01_btm.png) repeat-x 0 100%,
	        #669900 url(./bg_01_mdl.png) repeat-x;
    -pie-background:url(./bg_01_tl.png) no-repeat,
	        url(./bg_01_tr.png) no-repeat 100% 0,
	        url(./bg_01_top.png) repeat-x,
	        url(./bg_01_btm2.png) repeat-x 8px 100%,
	        url(./bg_01_btm.png) repeat-x 0 100%,
	        #669900 url(./bg_01_mdl.png) repeat-x;
    padding:40px 80px 150px;
    behavior: url('https://shiba-sub2.sakuraweb.com/HTML5/PIE.htc');
}

hgroup{
	display:block;
	text-align:center;
	margin:0 0 1.6em;
}
hgroup h1{font-size:200%; margin:0;}
hgroup h2{font-size:114%; margin:0;}
h3{font-size:114%; margin:.6em 0;}
p { margin:-20px 0 .6em 15px;}
</style>

中略

<section class="section-main">
<hgroup>
　<h1>Multiple background images試験</h1>
</hgroup>
　<h2>イメージの重ね合わせ</h2>
　　<p>Multiple backgroundは複数のイメージを重ね合わせることができる</p>
　<h2>IE8に組込み</h2>
　　<p>PIE.htcを組込むことでIE8でも使うことができる。</p>
</section>

重ね合わせた結果を表示