jquery.backstretch.js：ブラウザサイズに合わせて複数の背景画像を切り替え表示してくれるJs

指定した複数のjpg背景画像を指定秒数でフェード切替してみます。

1．読込むJsファイルとJavaScriptの記述例

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.backstretch.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	$.backstretch([
		"i1.jpg",
		"i2.jpg",
		"i3.jpg"
		], {
		fade: 500,
		duration: 3000
	});

});
</script>

2．HTMLの記述例

特に指定はありません。

jquery.backstretch.js：ブラウザサイズに合わせて複数の背景画像を切り替え表示するデモ

ソース元：Backstretch: a simple jQuery plugin that allows you to add a dynamically-resized background image to any page

解像度が高い画像を多く使い過ぎると始めの読込に時間が掛かる可能性がありますね。