背景画像を複数個表示したい

css2.1

ブラウザの大きさを変えても両端に常に背景画像を表示したかった。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

*{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

html{
	background-image:url(images/bg_left.png);
	background-repeat:no-repeat;
	background-position:top left;
	z-index:-2;
}

body{
	background-image:url(images/bg_right.png);
	background-repeat:no-repeat;
	background-position:top right;
	z-index:-1;
}

#container{
  width:820px;
	margin:0 auto;
}

</style>

<title>無題ドキュメント</title>
</head>

<body>

<div id="container">
  <div id="header"></div>
  <div id="wrapper"></div>
  <div id="footer"></div>
</div>

</body>
</html>

単にこれだけなのにうまくいかない。。。。
色々なサイトで実例出てるのにな、、、
小さい画像だからかぶることもないし。

謎です。

追記

あとで試してみる
http://www.hyper-portfolio.com/article/?id=96

現在持って帰ってきた仕事中・・・
ずっとだけど、睡眠時間がどんどん削られていく。
今日の朝はマンションの廊下を歩くのすらきついくらい眠い状態で会社行ったしなー・・・