JSF 2.0 でCSSリソース内の画像を読み込むにはコツが必要です。
Bootstrapのglyphicons-halflings.pngを読み込むのに暫く悩んだのでそのメモなど。
フォルダ構成は次のようになっています。(Mavenです)
root
+-- src
+-- webapp
+-- resources
+-- css
| +-- bootstrap.min.css
+-- img
+-- glyphicons-halflings.png
JSFなのでXHTMLを使い、CSSの読み込みは以下のようにします。
<h:outputStylesheet library="css" name="bootstrap.min.css"/>
このとき、bootstrap.min.css内のイメージのパスは../img/glyphicons-halflings.png
となっていますが、
このままでは画像が読み込まれません。まあ、パスからも明らかですね。
問題を解決するには次のように、イメージのパスを変更する必要があります。
background-image:url("#{resource['img/glyphicons-halflings.png']}")
Jun 20, 2013 追記
twitterで@den2snさんに教えてもらったのですが、outputStylesheetを下記のようにlibraryを削除して宣言することにより、 bootstrap.min.cssを書き換えなくても良くなります。
<h:outputStylesheet name="css/bootstrap.min.css"/>