IE7、IE8のブラウザでもCSS3のbackground-size:containとbackground-size:coverを使用するためのjQuery プラグインがjquery.backgroundSizeです。
そこまでしてIE対応が必要か…の話は置いておいて、今回はjquery.backgroundSizeの基本的な使い方をサンプルに加えて、プラグイン使用に関する注意点も合わせてご紹介します。
jquery.backgroundSizeファイルのダウンロード
以下のサイトよりjquery.backgroundSizeのファイルをダウンロードします。
jquery.backgroundSize.js<
プラグイン提供先のサイトが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]>で括るようにします。|
1 2 3 4 5 6 7 8 9 |
<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を適用させる例です。
|
1 2 3 4 5 6 7 8 9 10 11 |
<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を適用させる例です。
|
1 2 3 4 5 6 7 8 9 |
<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を指定します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .contents { width:auto; height:360px; background-image:url(./images/images01.jpg); background-repeat:no-repeat; background-size:cover } </style> <div class="contents"></div> |
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用にレイアウトを別途補正しないといけない場合があります。
コメント