css - Images not rendered when using h:outputStylesheet -

css - Images not rendered when using h:outputStylesheet -

i'm using jsf 2.0 resource managing mechanism. under /webapp/resources, have 3 subfolders: images, scripts, styles. , in template file mylayout.xhtml, reference style sheet following

<h:outputstylesheet name="styles/styles.css"/>

i set background images in styles.css file following:

body { background: #fff url(../images/body_background.png) repeat -x; } #header { background: transparent url(../images/header_bg.png) no-repeat top right; }

all page facelets reside under sub folder /webapp/facelets while template files reside under /webapp/template. facelet page.xhtml references template following:

<ui:compsition .... template="/template/mylayout.xhtml">

then page layout except background images missing. i've checked log , found next errors:

java.io.filenotfoundexception: srve0190: file not found: /javax.faces.resource/images/body_background.png java.io.filenotfoundexception: srve0190: file not found: /javax.faces.resource/images/header_bg.png

then alter url reference in css file from

url(../images/body_background.png)

to url(/i

you need reference css image resources via #{resource} in el print proper jsf resource url.

class="lang-css prettyprint-override">body { background: #fff url(#{resource['images/body_background.png']}) repeat -x; } #header { background: transparent url(#{resource['images/header_bg.png']}) no-repeat top right; }

css jsf-2