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

サイト構築 -CSS

Post on:2009年1月19日

sponsors

Photoshopの「生成塗りつぶし」を文字の加工に活用しよう！ 2024年4月26日金曜日 20時から21時30分

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

Fixed Footer Backgrounds with CSS
demo, demo 2

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

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

HTML

<textarea name="code" class="html" cols="60" rows="5">
<body>
	<div class="headwrap">
		<div class="container">Content</div>
	</div>
</body>
</textarea>

<body>

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

</div>

</body>

</textarea>

CSS：bodyに指定

<textarea name="code" class="css" cols="60" rows="5">
body{
	margin:0;
	padding:0;
	background:#005094 url(footer_bg.jpg) fixed repeat-x left bottom;
	width:100%;
	min-width:970px;/*--Fixes Background Bug--*/
}
</textarea>

body{

margin:0;

padding:0;

background:#005094 url(footer_bg.jpg) fixed repeat-x left bottom;

width:100%;

min-width:970px;/*--Fixes Background Bug--*/

}

</textarea>

CSS：.headwrapに指定

<textarea name="code" class="css" cols="60" rows="5">
.headwrap{
	background:url(body_bg.jpg) no-repeat center top;
	float:left;
	width:100%;
}
</textarea>