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

PR

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以下に対してのみ動くように 条件をつけてあります。

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

 

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー