[CSS3,jquery] background-size で背景画像を画面いっぱいに表示するよ!しかもjqueryでIE7、IE8も対応だよ!

背景画像を画面いっぱいに広げるってーのはー男のマロン。栗は美味しいね下山です。
かなり前に「[CSS]ディスプレイサイズが変わっても背景画像を画面いっぱいに表示する」ていうの記事を書きましたがこちらの方がラクかな?

background-sizeについて

background-sizeとは背景画像のサイズを指定するCSSプロパティです。

構文例

その他値にはem、ex、%で指定する方法もあります。
そして今回使用するcover、それとcontainが指定できます。
coverは画面サイズによって画像が切り取られるのに対してcontainは切り取らずに余白で処理します。

今回のデモ

background-sizeも理解できたところで今回のデモはこちらです。
background-sizeで背景画像を画面いっぱいに表示するよ!

CSS

CSSは以下の通りです。

ウザったいからショートハンドを使うと

ちまみにbackground-sizeをショートハンドで書く場合は「/」を挟んで書いてください。

はい。ここまででbackground-sizeを理解して大概の方はブラウザイッパイに背景画像が広がってることでしょう。
おまけにブラウザの大きさをグリグリ変えて見てることでしょう。

IEユーザーはIE9以上にかただけ。

さてここからが本題。
これをIE6以上でなんとかしてやろうじゃないかというわけです。

そこで利用するのがjQueryプラグイン「jquery.backgroundSize.js」!

まずはダウンロード

jquery.backgroundSize.js
jquery.backgroundSize.js

設置はカンタン

まずはjQueryを読み込んで、その後にIE8以下だけjquery.backgroundSize.jsを読み込むようにします。

まとめ

ほらカンタンだったでしょ?
IE6,7,8でもばっちりとまでは行きませんけど、それなりのミテクレにはなりました。
またhtcファイルなのでサーバによって対応してないとか・・・未確認です。

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