[jQuery]IE8でCSS3のbackground-size:coverを扱う

全画面やwidth:100%での背景画像

最近のデザインでフルスクリーンで背景画像をいっぱいまで表示するものが多い印象です。

その際、コーディングではCSS3のbackground-size:cover;をよく使われると思います。

ですが、IE8ではCSS3に対応していないので非常に困りますw

まだ日本ではIE8のシェアはそれなりにあるため、IE8を切り捨てるという選択は中々難しいです。

私が働いている会社では少なくともIE8は当分サポートです。。。なかなか実装面で厳しいものも多くなってきました；；

backgroundSize.js

以前は、「backgroundSize.js」というものを使用してIE8のカバーをしていましたが、このプラグインに脆弱性かエラー等で

DEPRECATED(非推奨)となってしまいました。また実際にIE8でリサイズ等をした時にfunctionエラーが発生し、使用するのは危険です。

「backgroundSize.js」の作者が次なるバージョン「background-size-polyfill」なるものを作成してしております。

こちらは.htcファイルを使い、background-sizeを使えるようにしているようです。

backgroundcover

htcファイルではローカルでのチェックなどが面倒なので、jQueryで動作する代わりのものを探していました。

で今回ご紹介するのが「jquery.backgroundcover」です！

IE8の場合は、imgタグで置き換えて動作します。

また、background-imageでも、自動的に読み込んでimgタグに吐き出してくれマス。

IEの条件付きコメントアウトハックなどでIE8以下などにスクリプトを掛けてよく使っています！

使用方法

jQueryの読み込み/コード

<script src="common/js/jquery-1.9.1.min.js"></script>
<script src="common/js/jquery.backgroundcover.js"></script>
$(function(){
 $('.background').backgroundcover({
 safearea: "10%,50%,10%,10%"
 });
});

HTMLはこちら

<div class="background"></div>

CSS

.background {
  width: 100%;
  height: 300px
  background: url(1100x400.png) left top no-repeat;
  background-size: cover;
}

デモ

実際に使用しているデモを作ってみました。

よかったらIE8などで試してみてください。

DEMO

ライセンス

ライセンスはMITライセンスです。