IE8用にbackground-size を設定できるようにするプラグイン「jquery.backgroundSize.js」

Internet Explorer 8ではCSSのbackground-sizeが使うことが出来ません、背景画像とかを使う場合にはbackground-sizeが使えないとレスポンシブなデザインとではとても不便です。そこでIE8でもbackground-sizeが擬似的に使えるようになるプラグインをご紹介！

jquery.backgroundSize.js

http://louisremi.github.io/jquery.backgroundSize.js/demo/

まずは上記のサイトからjQueryプラグインをダウンロードします。

左の四角の下の方にあるDownloadリンクからダウンロード出来ます

ライセンスは MIT ライセンスで再配布、商用利用、販売可です。

一応ここにも、置いておきます。

DOWNLOAD

使い方

まず、jQueryプラグインを読み込んでおきます。jQueryが無いとこちらのプラグインは動きません

bodyの終了タグあたりに以下のように書きます

<!--[if lt IE 9]>
<script src="js/jquery.backgroundSize.js"></script>
<script>
 $(".header").css( "background-size", "cover" );
</script>
<![endif]-->

coverのところを、通常のCSSと同じように指定すればOKです

.header は適応するCSSのセレクタを指定しています。

IE9からは background-size に対応しているので、IE8以下に対してのみ動くように条件をつけてあります。

プラグインのパスは環境に合わせて設定してください