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

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

デモのキャプチャ

Fixed Footer Backgrounds with CSS
demo, demo 2

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

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

仕組みのイメージ図

HTML

CSS:bodyに指定

CSS:.headwrapに指定

top of page

©2017 coliss