: サイト構築 -CSS

[CSS]背景画像をページの最下部に固定表示させるスタイルシート

背景画像をページの最下部に固定表示させるスタイルシートをSOH TANAKAから紹介します。

Fixed Footer Backgrounds with CSS
demo, demo 2

デモではスクロールバーの有無の２パターンがあり、スクロールをしてもブラウザのサイズを変更しても背景画像がフッタの位置に固定表示されています。

仕組みの概要は、bodyに背景色と背景画像を指定し、背景画像は「fixed bottom」にします。
コンテンツを内包するdiv（headwrap）を設置し、ページ上部に表示される背景画像を指定します。

HTML

<body>
<div class="headwrap">
<div class="container">Content</div>
</div>

</body>

CSS：bodyに指定

body{
	margin:0;
	padding:0;
	background:#005094 url(footer_bg.jpg) fixed repeat-x left bottom;
	width:100%;
	min-width:970px;/*--Fixes Background Bug--*/
}

CSS：.headwrapに指定

.headwrap{
	background:url(body_bg.jpg) no-repeat center top;
	float:left;
	width:100%;
}

Post on:2009年1月19日

ページの先頭へ

[CSS]背景画像をページの最下部に固定表示させるスタイルシート

HTML

CSS：bodyに指定

CSS：.headwrapに指定

更新情報