BACKSTRETCHは、ウインドウ全体もしくは指定要素の全体に背景画像を表示することができるjQueryプラグインです。
デモは、ダウンロードページのDemosでご確認いただけます。
BACKSTRETCHの使い方
ダウンロードページにアクセスして、「Download Backstretch Now」を右クリックし、ファイルをダウンロードします。
</body>の直前に以下コードを追加します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
$(function(){
$("body").backstretch("img1.jpg");
});
</script>
上記だと、ウインドウ全体を覆うように背景画像が表示されます。「img1.jpg」の部分が背景画像の指定なので、ファイルパスは適宜変更してください。
特定の要素全体に背景画像を表示する
特定の要素の背景全体に画像を表示したい場合は、以下のように記述します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
$(function(){
$("#box").backstretch("img1.jpg");
});
</script>
「#box」の部分でIDやクラスを指定します。
背景画像をスライドショーにする
背景画像をスライドショーにしたい場合は、以下のように記述します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
$(function(){
$("#box").backstretch([
"img1.jpg",
"img2.jpg",
"img3.jpg"
], {duration: 3000, fade: 750});
});
</script>
上記例は、#boxの背景画像をスライドショーにしています。ウインドウ全体に配置したい場合は、「#box」を「body」に変更します。
あとがき
導入も非常に簡単で使いやすいですね。背景全体に画像を敷いたページを作成したい時は、ぜひご活用ください。
ちなみに、jQueryを使わずにCSSのみで背景全体に画像を配置したい場合は、CSSだけで画面いっぱいに背景画像を表示する方法をご参照ください。