ブラウザの背景画像をCSSで変えるかスクリプトで変えるか(2)

昨日の話はimgタグを挿入しても同じことできるんだけどimgタグで横幅指定すると画像が汚くなる（と思っていた）からわざわざ画像編集ライブラリ使ってリサイズしてたんだよね．ところが実際にやってみたら汚くなかったorzこっちだとサイズ指定も不透明度もCSSで指定できるのでサーバ側は画像をランダムに返すだけでいい．

(function(){
    var body = document.body;
    var img = document.createElement('img'); 
    img.setAttribute("src", "http://localhost/cgi-bin/bg.py");
    img.style.zIndex = "-1";
    img.style.position = "fixed";
    img.style.bottom = "0";
    img.style.right = "0";
    img.style.opacity = "0.5";
    img.style.width = "500";
    body.style.backgroundColor = "rgb(255,255,255)";
    body.appendChild(img);

ところが，こうするとスクロールしたときに画像がある部分と無い部分でスクロールのタイミングが微妙にずれてしまう（↓画像）．背景ではなくIMGタグのpositionをfixedにしているからだろうかちょっと気持ち悪い．

結局は前と同じ方法を使うことになりそうだ．

あと，これとは関係なくFirefoxでCSSなどにローカルファイルを指定する方法がわかった．下のようにresource:///*1とロケーションバー（アドレスバー）に入力してみれば分かるとおり，resourceというスキームでFirefoxをインストールしたディレクトリにアクセスすることができる．

resource:///

つまり，背景画像を指定する際にCSSだと

background-image: url(resource:///nanoha.png);

JavaScriptだと

obj.style.backgroundImage = "url(resource:///nanoha.png)";

といった指定をすることができる．

あらかじめ決められたディレクトリに規則的な名前で画像を保存しておけば，JavaScript側で画像をランダムに選択して表示することもできるだろう．

*1:なぜかスラッシュ三つ