[CSS]背景画像をページの最下部に固定表示させるスタイルシート
Post on:2009年1月19日
sponsors
背景画像をページの最下部に固定表示させるスタイルシートをSOH TANAKAから紹介します。
Fixed Footer Backgrounds with CSS
demo, demo 2
デモではスクロールバーの有無の２パターンがあり、スクロールをしてもブラウザのサイズを変更しても背景画像がフッタの位置に固定表示されています。
仕組みの概要は、bodyに背景色と背景画像を指定し、背景画像は「fixed bottom」にします。
コンテンツを内包するdiv（headwrap）を設置し、ページ上部に表示される背景画像を指定します。
HTML
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> <body> <div class="headwrap"> <div class="container">Content</div> </div> </body> </textarea> |
CSS：bodyに指定
|
1 2 3 4 5 6 7 8 9 |
<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> |
CSS：.headwrapに指定
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> .headwrap{ background:url(body_bg.jpg) no-repeat center top; float:left; width:100%; } </textarea> |
sponsors
