ランダム背景 [js]

html

<div id="bg">
<!--ここにコンテンツ-->
</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

ランダム背景を設定したいタグに任意のclass名またはid名をつけます（bodyタグにランダム背景を設定したいときはとくにclass/idは必要ありません）。

css

#bg{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* 注：css3 */
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

ランダム背景を設定する要素に対して、背景に関するcssを設定します（使用するプロパティや値はこの限りではありません）。

js

var wall = new Array();

wall[0] = "画像ファイルのパス";
wall[1] = "画像ファイルのパス";
wall[2] = "画像ファイルのパス";

var rnd = Math.floor((Math.random() * 100)) % wall.length; //またはMath.floor(Math.random() * wall.length);
document.write('');

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

1. 1行目：ランダムに表示したい背景画像を格納する配列を用意。
2. 3〜5行目：配列に画像のパスを格納（理論的には画像の数に制限はない）
3. 7行目：表示する画像を格納している配列番号をランダムに抽出
4. 8行目：htmlに背景画像を指定するcssを挿入（#bgをランダム背景を設定したい要素のタグ名またはclass名またはid名に書き換える）

• wall.length・・・lengthプロパティは配列の要素数を取得する
• Math.random()・・・0以上1未満の範囲で疑似乱数を返す（小数点数なので配列の番号に使うには整数にする必要あり）
• Math.floor()・・・小数点以下を切り捨てる
  ここでは、Math.random()に100をかけて小数点以下を切り捨てることで0～99の乱数を取得し、さらに配列の要素数で割った余りを求めることで、0～2の整数をランダムに抽出。
• document.write()・・・htmlソース内に書き出す
  htmlは原則、記述順に実行するので、headタグ内にこのjsコードを記述している場合は、このjsコードを書き込んだすぐ下にスタイルが挿入される（つまりheadタグ内に挿入される）。

• 配列番号の範囲内でランダム数を求める式は
  rnd = Math.floor(Math.random() * wall.length);
  でも良いです。
  ただし、こちらにすると0の結果が出る確率が高くなると思われます。
• 自動リロードに関するjs（jquery）コードは割愛します。自動リロードはこちらに説明があります。