朝顔日記

Repetitive Restructure - ユーザースタイルシートで背景画像指定ってできないのか にて、Firefox のユーザスタイルシートで背景画像を指定できないのかと困って（？）おられるようなのですが、そうだっけと試してみました。

おそらく、ローカルファイルを指定してもセキュリティ上の理由とやらで駄目だろうということで、web の画像を背景画像にしてみました。userContent.css に以下のスタイルを定義。

@-moz-document domain("cogwheel.vis.ne.jp") {
body, #content{
  background:#333 url("http://diary.noasobi.net/style/fx_bg1.jpg") no-repeat fixed;
  }
.text{
  background:#333 url("http://diary.noasobi.net/style/fx_bg2.jpg") no-repeat fixed;
  color:#fff;
  }
}

最初の @-moz-document というのは、Firefox 1.5 から使えるようになったサイト別スタイルシートを指定するおまじないです。ここらの書き方については、@-moz-documentルール にあるとおりです。

で、実際に適応させてみたところのスクリーンショットのサムネイルは以下のとおりです。

ちなみに、背景画像を web 上に置くと言っても、ローカルにサーバを立てている場合はローカルアドレスでも大丈夫です。

ローカルでサーバを立てていないという場合はデータスキームを使って、css ファイル内に画像を直接記述するという方法もあります。背景画像ではありませんが私が userContent.css で使っているのは、こんなのです。

a[target="_blank"], a[target="_antenna"], a[_base_target="_blank"], a[href^="javascript"] {
  cursor:url("data:image/cur;base64,AAACAAEAFBgQAAAAAADoAQAAFgAAACgAAAAUAAAAMAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///8AAAAAAP///wAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREREREREREREQAAEREREREREREREQAAERERESIiIiIREQAAERERESERESIREQAAEREREiEiISIREQAAEREREiEjMSIhEQAAERERIiEjMyMhEQAAERERIiERMzMiEQAAERESIiIiIzMiEQAAERESEiIiMzMiEQAAEREiEiIiIiIiEQAAERIiEiIiIiIiEQAAERIhEiIiIiEiEQAAEREREiEiEiEiEQAAEREREiEiEiEhEQAAEREREiEiEiEREQAAEREREiEiEREREQAAEREREiEREREREQAAEREREiEREREREQAAEREREiEREREREQAAEREREiEREREREQAAEREREiEREREREQAAEREREREREREREQAAEREREREREREREQAA///wAP4AcAD+AHAA/gBwAPwAcAD8ADAA+AAwAPgAEADwABAA8AAQAOAAEADAABAAwAAQAMQAEAD8ADAA/ABwAPwB8AD8D/AA/D/wAPw/8AD8P/AA/D/wAP5/8AD///AA"), pointer;
}