userChrome.css でパノラマの背景を設定する

こんなことをしてみている。
画像はキャンドル＆スノーハウス（2010年12月カレンダー） 壁紙 -壁紙.com-から拝借。

@charet "utf-8";
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

@-moz-document url("chrome://browser/content/tabview.html") {
  html|div#bg {
    background-image: url(file:///C:/home/teramako/MyDocuments/cal_201012.jpg) !important;
    background-color: black !important;
    background-repeat: no-repeat !important;
    background-size: 100% auto !important;
    background-position: bottom right !important;
  }
  html|div.groupItem {
    background-color: rgba(224,234,245,.5) !important;
  }
  html|input.name {
    color: black !important;
    font-weight: bold;
    text-shadow: none !important;
  }
  html|span.tab-title {
    text-shadow: none !important;
  }
  html|input#exit-button,
  html|input#searchbutton {
    background-color: rgba(240,240,240,.2) !important;
  }
}

本来、userChrome.cssはXULの名前空間となっている。が、パノラマの部分はXHTMLとなっているため、XULの名前空間とは異なり、普通の書き方だとうまくできなかった。XHTMLの名前空間を指定してやったら出来た。

画像のように、カレンダー画像とかを指定すれば結構有用に使えるかも。

また、Firefox 4: Drawing arbitrary elements as backgrounds with -moz-element ? Mozilla Hacks ? the Web developer blogにあるような-moz-elementとCanvasやSVGを組み合わせて、userChrome.jsなどでJavaScript操作すれば動的な背景も作れそう。

みなさん、いろいろ工夫してみてはどうでしょう。