背景画像を画面いっぱいに表示する＝jQueryって思われがちですけどCSSで十分いけまっせ。なメモ。
と言ってもbackgroundで背景指定するのではなくimgで貼った画像をCSSでfixedしちゃえって話です。
まずはdemoを。
ディスプレイサイズが変わっても背景画像を画面いっぱいに表示するデモ
こんな感じです。
html
<img src="img/bg_bee.jpg" class="bg" alt=""> <div class="header"> <h1>ディスプレイサイズが変わっても背景画像を画面いっぱいに表示するCSS</h1> </div> <div class="content"> <h2>背景画像と言うよりも</h2> <p> backgroundとかで指定するのではなく、画像を貼ってfixedしてあげる。<br> もちろんその他のコンテンツはrelativeしてあげればOKだね！ </p> <h2>ハチとマクロ</h2> <p> ハチを撮ってみた。<br> マクロレンズに撮ってみた<br> </p> <p> マクロレンズって面白い。<br> ファインダーの中の被写体が手に取れるように見える。<br> 被写体に見とれて油断するとシャッターチャンスを逃してしまう。 </p> <p> だからマクロレンズは面白い。<br> これは望遠レンズでは味わえない醍醐味だと思った。 </p> <p class="margin-ippai"> おわり。 </p> </div>
CSS
img.bg {
min-width:1024px;
min-height:100%;
width:100%;
height:auto;
position:fixed;
top:0;
left:0;
}
div.header {
position:fixed;
top:0;
left:0;
}
div.content {
position:relative;
}
※CSSは最低限必要なものしか記載してません。
デモのCSSはデモ本体のCSSを参照。
とりあえずmin-width:1024pxとmin-height:100%で最小値を指定してますが、なくても問題はありません。
ただし画面サイズが小さくなると下に余白が発生してカッコ悪いです。(横写真の場合)
写真はできるだけ高解像度で大きな写真を使うといいと思いますが、あまり大きすぎると表示に時間がかかってしまいますので注意。
デモは一眼で撮影した生のデータを使用してみました。(4928*3264 / 2.75MB)
小さすぎるとせっかくの写真がボケてしまうので、こちらも注意。
まとめ
IE6には対応してません。まーいいんじゃね？
jQuery使うのもありだと思いますが、CSSだけでできてしまうのでおすすめかと思います。
あとメディアクエリ使って被写体をしっかり見せるように配置するのもありかと思います。
例えば被写体が右側にある場合、画面サイズが小さくなると写真の右側が見えなくなります。
そこで画面サイズが1024px以下になったら写真を左にずらすとかいいんじゃないですかね？
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}こんな感じで。
CSSバンザイ！
