[CSS]ディスプレイサイズが変わっても背景画像を画面いっぱいに表示する

背景画像を画面いっぱいに表示する=jQueryって思われがちですけどCSSで十分いけまっせ。なメモ。

と言ってもbackgroundで背景指定するのではなくimgで貼った画像をCSSでfixedしちゃえって話です。

まずはdemoを。
ディスプレイサイズが変わっても背景画像を画面いっぱいに表示するデモ

こんな感じです。

html

CSS

※CSSは最低限必要なものしか記載してません。
デモのCSSはデモ本体のCSSを参照。

とりあえずmin-width:1024pxとmin-height:100%で最小値を指定してますが、なくても問題はありません。
ただし画面サイズが小さくなると下に余白が発生してカッコ悪いです。(横写真の場合)

写真はできるだけ高解像度で大きな写真を使うといいと思いますが、あまり大きすぎると表示に時間がかかってしまいますので注意。
デモは一眼で撮影した生のデータを使用してみました。(4928*3264 / 2.75MB)
小さすぎるとせっかくの写真がボケてしまうので、こちらも注意。

まとめ

IE6には対応してません。まーいいんじゃね?
jQuery使うのもありだと思いますが、CSSだけでできてしまうのでおすすめかと思います。

あとメディアクエリ使って被写体をしっかり見せるように配置するのもありかと思います。
例えば被写体が右側にある場合、画面サイズが小さくなると写真の右側が見えなくなります。
そこで画面サイズが1024px以下になったら写真を左にずらすとかいいんじゃないですかね?

こんな感じで。

CSSバンザイ!

参考サイト

CSS-TRICK

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク