1300の優良サイトを調査してみたシリーズ、第10回は「フルスクリーンバックグラウンドイメージ(Full Screen Background Image)」です。
背景にフルスクリーンの状態で画像を表示させるには、独特なノウハウを必要とします。この対策への呼び名は日本にはまだ輸入されていませんが、海外だと「Full Screen Background Image」と呼ばれています。
CSS2のみでも対策は可能です。以下が、その記述方法です。
▼ CSS
html, body { height: 100%; width: 100%; padding: 0; margin: 0; } #full-screen-background-image { z-index: -999; min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; } #wrapper { position: relative; width: 800px; min-height: 400px; margin: 100px auto; color: #333; }
▼ HTML
<body> <img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" /> <div id="wrapper"> <p>Content goes here...</p> </div> </body>
ただし、ライブラリを使えばノウハウが無くても対策が可能です。ふろしき.jsの調査では、1300中18サイト(1.38%)にてライブラリによる対策が確認されました。
jQuery MaxImage (12件 - 0.92%)
背景画像をフルスクリーン化させるだけでなく、スライダーとしても機能します。
- 公式サイト:http://www.aaronvanderzwan.com/maximage/
- ライセンス:MIT / GPL licenses
- 開発:Aaron Vanderzwan
jQuery Backstretch (6件 - 0.46%)
背景画像をフルスクリーン化させます。
- 公式サイト:http://srobbin.com/jquery-plugins/backstretch/
- ライセンス:MIT License
- 開発:Scott Robbin
最後に
ノウハウが多いとはいえ、やろうと思えばやれてしまう気軽さが悩みどころですね。JSライブラリは、なんだかんだ言っても、ロード時間を遅らせますからね。