背景画像を画面いっぱいに広げるってーのはー男のマロン。栗は美味しいね下山です。
かなり前に「[CSS]ディスプレイサイズが変わっても背景画像を画面いっぱいに表示する」ていうの記事を書きましたがこちらの方がラクかな？
background-sizeについて
background-sizeとは背景画像のサイズを指定するCSSプロパティです。
構文例
background-size: 幅 高さ; background-size: 100px auto; background-size: 100px; /* 上記2例は同じこと 値を1つだけ記述した場合、自動で高さにautoがつきます。 */
その他値にはem、ex、％で指定する方法もあります。
そして今回使用するcover、それとcontainが指定できます。
coverは画面サイズによって画像が切り取られるのに対してcontainは切り取らずに余白で処理します。
今回のデモ
background-sizeも理解できたところで今回のデモはこちらです。
background-sizeで背景画像を画面いっぱいに表示するよ！
CSS
CSSは以下の通りです。
body {
background-image: url(img/bg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}ウザったいからショートハンドを使うと
body {
background: url(img/bg.jpg) center center / cover no-repeat fixed;
}ちまみにbackground-sizeをショートハンドで書く場合は「/」を挟んで書いてください。
はい。ここまででbackground-sizeを理解して大概の方はブラウザイッパイに背景画像が広がってることでしょう。
おまけにブラウザの大きさをグリグリ変えて見てることでしょう。
IEユーザーはIE9以上にかただけ。
さてここからが本題。
これをIE6以上でなんとかしてやろうじゃないかというわけです。
そこで利用するのがjQueryプラグイン「jquery.backgroundSize.js」！
まずはダウンロード
設置はカンタン
まずはjQueryを読み込んで、その後にIE8以下だけjquery.backgroundSize.jsを読み込むようにします。
<!--[if lte IE 8]>
<script src="js/jquery.backgroundSize.js"></script>
<script>
$(function() {
$("body").css( "background-size", "cover" );
});
</script>
<![endif]-->まとめ
ほらカンタンだったでしょ？
IE6,7,8でもばっちりとまでは行きませんけど、それなりのミテクレにはなりました。
またhtcファイルなのでサーバによって対応してないとか・・・未確認です。
