背景スライド3■背景サイズ指定スライド    最終修正日 : 2016/04/04

◎動くJavaScript◎

●2016/04/04:即時関数で囲んで、グローバル変数を消しました。
普通の画像(img)の全面スライドショーではなく、本物の背景画像(background-image)の全面スライドショーです。
横幅100%指定の背景画像のスライドショーですが、使用した背景画像の実寸は横幅600px縦幅250pxです。
その横長画像をCSSで
background-size: 100% auto;
の指定をすることで、画面横幅一杯の拡大表示にしています。

background-sizeプロパティについては、HTMLクイックリファレンスに詳しい説明があります。
なお、今回のような指定にブラウザが対応してない場合は、お手軽に『背景画像もどき』の方法で■背景スライド1■全面スライドショー■する方法もあります。

前回掲載分はbodyの背景画像の全面指定でした。
しかしチラつき防止のためにbodyではなくdivで全面に領域を作って、その背景画像をスライドさせる方法に修正しました。
修正理由の詳細は、こちらから。
bodyの背景画像のように上に文章が書けるように、divにCSSで z-indexのマイナス指定を付けます。

CSSで背景画像の最初の1枚目を指定していますが、指定しなくても動作します。
ただJavaScriptが動作しない場合に備えて、指定しておく方が安全。