便利なjQueryプラグイン［jQuery BackStretch］を使うと、背景に指定した画像をブラウザのウィンドウサイズに最適化してくれて、さらにスライドショーにも対応し、複数の画像を順番に表示してくれます。

簡単に設定できることはもちろん、背景画像を最後に表示させるので、メインのコンテンツが表示されるまで待つ必要がないのが特徴です。

まずは「Backstretch」のページからファイルを一式ダウンロードします。

<head>〜</head>内でjQuery本体とBackstretchを読み込みます。

<script src="../jquery.js"></script>
<script src="../jquery.backstretch.js"></script>

続いてBackstretchの設定です。

<script>
$.backstretch("sample01.jpg");  //　背景にする画像を指定
</script>

１つの画像を背景に設定する場合は以上です。これで背景に画像が設定され、ウィンドウズサイズによって画像の大きさが変わります。

基本的にBackstretch自体はスライドショーに対応していませんが、次のようなコードを書くことで簡単にスライドショーが可能です

<script>
var images = [
"Aerial01.jpg",
"Aerial02.jpg",
"Aerial03.jpg",
"Aerial04.jpg",
"Aerial05.jpg"
];
// 指定画像をプリロードする
$(images).each(function(){
	$('<img/>')[0].src = this;
	});
	var index = 0;
	// 背景をコール。下記の場合、500ミリ秒で呼び出します。
	$.backstretch(images[index], {speed: 300});
	setInterval(function() {
		index = (index >= images.length - 1) ? 0 : index + 1;
		$.backstretch(images[index]);
}, 5000);
</script>

以下、実装したサンプルをどうぞ。

jQuery BackStretch：サンプル