オススメポイントは、軽量で設置もとっても簡単にできるところです。
圧縮されたmin版で4Kほどで、動きもとってもなめらか。
jQueryプラグイン『BACKSTRETCH』
背景だけでなく、特定の要素内でも使え、ただ表示させるだけじゃなくて、フェードで複数の背景を切り替えたりといったことまでできます。

※ デモは、上記リンクから見ることができます。
githubからdownloadもできます。
使い方
1. 上記のURLよりjQueryプラグインをダウンロードします。
2. jQuery(version 1.7 or newer)とプラグインのファイルを読み込みます。
1 2 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="../js/jquery.backstretch.min.js"></script> |
こうしてjQuery本体とbackstretchを読み込んだ上で
単一の画像を背景ピッタリに表示する場合
1 2 3 |
<script type="text/javascript"> $.backstretch("./img/background.jpg"); </script> |
このように画像ファイルへのパスを指定するだけです。
単一の画像を特定要素にピッタリに表示する場合
1 2 3 |
<script type="text/javascript"> $("#demo").backstretch("./img/background.jpg"); </script> |
特定要素も背景の場合とあまり変わりませんが、表示させたい要素と画像ファイルへのパスを指定するだけです。
クリックで画像を切り替える場合
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $.backstretch("./img1.jpg", {fade: 500}); $("#demo1").click(function (e) { e.preventDefault(); $.backstretch("./img2.jpg"); }); $("#demo2").click(function (e) { e.preventDefault(); $.backstretch("./img3.jpg"); }); </script> |
HTML側には、ボタンを作成しておきます。
1 2 |
<input type="button" id="demo1" value="Show Background img2" /> <input type="button" id="demo2" value="Show Background img3" /> |
これで、ボタンを押すと画像が入れ替えることができます。
スライドショーで複数の画像を切り替える場合
1 2 3 4 5 6 7 |
<script type="text/javascript"> $.backstretch([ "./img1.jpg" , "./img2.jpg" , "./img3.jpg" ], {duration: 3000, fade: 750}); </script> |
durationとfadeはお好みで。
DEMO
スライドショーのデモを作成してみました。
対応ブラウザ
Google Chrome / Firefox では確認済
やはり全画面の背景画像はとてもインパクトありますね。