[JS]IE7、8でも background-size:contain が利用できるjQueryプラグイン「jquery.backgroundSize」
IE7、IE8 のブラウザでもCSS3 の background-size:contain
と background-size:cover
を使用するためのjQuery プラグインが jquery.backgroundSize です。
そこまでしてIE 対応が必要か…の話は置いておいて、今回は jquery.backgroundSize の基本的な使い方をサンプルに加えて、プラグイン使用に関する注意点も合わせてご紹介します。
目次
jquery.backgroundSize ファイルのダウンロード

以下のサイトより jquery.backgroundSize のファイルをダウンロードします。
プラグイン提供先のサイトが jquery.backgroundSize を利用したデモページになっていますので、イメージを掴みやすいと思います。
background-size プロパティについて
CSS3 のbackground-size
については 背景画像のサイズを変更できるプロパティ「background-size」 の記事でも紹介していますので、合わせて参考にしてみてください。ちなみに background-size の値は以下のようになっています。
auto | 自動算出(初期値) |
---|---|
contain | 縦横比は保持。背景領域に収まる最大サイズに拡大縮小 |
cover | 縦横比は保持。背景領域を完全に覆う最小サイズに拡大縮小 |
px | pxで直接数値を指定 |
% | %で直接数値を指定 |
background-size:contain
<head> 内に jquery ファイルと一緒に jquery.backgroundSize.js ファイルを設置しますが、IE8 以下に対応させるので <!–[if lte IE 8]> で括るようにします。<script src="./jquery.min.js"></script> <!--[if lte IE 8]> <script src="./jquery.backgroundSize.js"></script> <script> $(function() { $("div.contents").css({backgroundSize: "contain"}); }); </script> <![endif]-->.contents の要素に対してCSS3 の
background-size:contain
を適用させる例です。<style> .contents { width:auto; height:360px; background-image:url(./images/images01.jpg); background-repeat:no-repeat; background-size:contain } </style> <div class="contents"></div>CSS の記述ですが、背景の画像を指定した上でモダンブラウザ用に
background-size:contain
を適用させます。background-size:contain のデモ
background-size:cover
続いて .contents の要素に対して CSS3 のbackground-size:cover
を適用させる例です。<script src="./jquery.min.js"></script> <!--[if lte IE 8]> <script src="./jquery.backgroundSize.js"></script> <script> $(function() { $("div.contents").css({backgroundSize: "cover"}); }); </script> <![endif]-->先の例と同様に、モダンブラウザ用に
background-size:cover
を指定します。<style> .contents { width:auto; height:360px; background-image:url(./images/images01.jpg); background-repeat:no-repeat; background-size:cover } </style> <div class="contents"></div>
background-size:cover のデモ
jquery.backgroundSize の注意点
jquery.backgroundSize を使う上でちょっとした注意点がありますので、過去に経験した事例も交えてまとめました。background-size: で % 指定すると動かない模様
contain、cover はIE7、8 でも効いてくれますが、% 指定だと動かないようです。background-size:50% のような使い方をするサイトの場合は、IE7、8 対応は厳しいかな…と思います。
background プロパティの取り扱いに注意
プラグインファイル内にも以下の通り記載されていますが、doesn’t work with multiple backgrounds (use the :after trick)
doesn’t work with the “4 values syntax” of background-position
doesn’t work with lengths in background-position (only percentages and keywords)
doesn’t work with “background-repeat: repeat;”
doesn’t work with non-default values of background-clip/origin/attachment/scroll
例えば background-position:50% 50%
のように background-position に数値を指定すると動いてくれません。
background-position:top center
のように指定すれば動いてはくれますが、IE7、8 用にレイアウトを別途補正しないといけない場合があります。
スポンサード
コメント