全画面もしくは指定した要素全体に背景画像を表示することができるjQueryプラグイン「BACKSTRETCH」

全画面もしくは指定した要素全体に背景画像を表示することができるjQueryプラグイン「BACKSTRETCH」

全画面もしくは指定した要素全体に背景画像を表示することができるjQueryプラグイン「BACKSTRETCH」

BACKSTRETCHは、ウインドウ全体もしくは指定要素の全体に背景画像を表示することができるjQueryプラグインです。

デモは、ダウンロードページのDemosでご確認いただけます。

BACKSTRETCHの使い方

ダウンロードページにアクセスして、「Download Backstretch Now」を右クリックし、ファイルをダウンロードします。

BACKSTRETCHのダウンロード

</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だけで画面いっぱいに背景画像を表示する方法をご参照ください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です