[JS]指定した要素内いっぱいに背景画像を最適に配置するシンプルなスクリプト -Wallpaper

ブラウザの表示サイズを変更しても、指定した要素内を背景画像で満たすjQueryのプラグインを紹介します。

Wallpaper
Wallpaper -GitHub

• Wallpaperのデモ
• Wallpaperの使い方

Wallpaperのデモ

デモはIE8+をはじめ、Chrome, Safari, Firefox, Operaなどのモダンブラウザでご覧ください。

デモページ：幅1200pxで表示

適用されてる画像は4ヵ所で、ヘッダに1つ、コンテンツに3つです。
ブラウザの表示サイズを変更しても、最適なサイズで表示されます。

幅780pxで表示

ヘッダの画像がちょっと薄くて見えにくいので、下の方も。

幅780pxで表示

更に幅を狭くしても、この通り。

幅480pxで表示

Wallpaperの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトを外部ファイルとして記述します。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.bp.wallpaper.js">

Step 2: HTML

HTMLは通常通りで、背景画像を配置する要素は指定できるようidなどを加えます。

<header id="element">
ヘッダ
</header>

複数箇所を適用する時は、classの方が便利です。

Step 3: JavaScript

jQueryのセレクタで要素を指定し、sourceに画像を指定し、スクリプトを実行します。

$("#element").wallpaper({
	source: "path/to/image.jpg"
});