[CSS]背景画像を簡単にランダム表示

JavaScriptを使わずに背景画像をランダム表示する方法を紹介します。


CSSとPHPファイルで、非常に簡単に背景画像のランダム表示が可能です。
JavaScriptを使用せずに、色々な背景画像をランダムにと表示したいなー。
と思っていたらとても簡単にできましたよ。

Web ≫A List Apart: Articles: Random Image Rotation

上記サイトでダウンロード可能ですが、わかりにくい方は以下をダウンロードしてください。

DW ≫rotate.zip

zip解凍後「rotate」フォルダにランダム表示したい画像を入れます。
「rotate」フォルダごとサーバーにアップ。
そしてCSSで表示したい箇所に、rotate.phpを指定します。

スタイルシートの記述は、表示させたい箇所に以下のように

body {
background: url(rotate/rotate.php);
}

試していないのですが、画像枚数の制限はないようです。
表示の割合などは設定できませんが、気軽な感じで使用するならなんの問題もありませんね。

コメントを残す

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