CSSで上下左右に異なる高さの背景を設置する方法

だいぶ前に
左右で色が異なる背景画像を設定するスタイルシート
がコリスで紹介されていたけど、
上下左右に異なる高さの背景を設置する方法を考えてみた。
IE6、IE7、Fx、Safari、opera、Chromeで表示できた。

ソースの解説↓

html

<div id="back01"></div>
<div id="back02"></div>
<div id="box">
contents
</div>
<div id="back03"></div>
<div id="back04"></div>

css

body{
margin:0px;
}
#back01 {
height:10px;
right:50%;
font-size:0;
background:red;
position:relative;
z-index:1;
}
#back02 {
height:20px;
width:50%;
right:-50%;
top:-10px;
font-size:0;
background:green;
position:relative;
z-index:1;
}


#back03 {
height:30px;
right:50%;
bottom:-40px;
font-size:0;
background:yellow;
position:relative;
z-index:1;
}
#back04 {
height:40px;
right:-50%;
width:50%;
background:blue;
position:relative;
z-index:1;
}

#box{
width:800px;
height:1000px;
background:#333;
margin:-30px auto -70px auto;
position:relative;
z-index:2;
}