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

html

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

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;
}

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

デモページ

Bookmark & Share

One Response to “CSSで背景をページの下まで伸ばす方法”

  1. you2u より:

    CSSで背景をページの下まで伸ばす方法 – http://bit.ly/cgetgH

Leave a Reply

  • Categories