CSSで背景をページの下まで伸ばす方法

背景をページの下まで伸ばすときには、bodyにbackgroundを指定すればいいのですが、bodyの背景は他のものを全体的に使って、その上にdivで指定した背景を縦方向にページの下まで伸ばしたい時は以下の方法が有効です。

html

[html]
<body>
<div id="wrapper">
<p>CSSで背景をページの下まで伸ばす方法</p>
</div>
</body>
[/html]

CSS

[css]
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background: url(images/bg.jpg) repeat center top;
}
#wrapper {
margin: 0 auto;
height: 100%;
min-height: 100%;
width: 800px;
text-align: center;
background: #F2F2F2;
}
body > #wrapper {
height: auto;
}
[/css]

これでdivに指定した背景を縦方向にページの下まで伸ばすことができます。
デモページも作ってみたので見てみてください。

デモページ