background-image: url("") in CSS h:outputStylesheet is not loading

jsf-2 resources background-image outputstylesheet

Pirzada · Nov 26, 2012 · Viewed 27.1k times · Source

Sorry if question is not properly asked. Image is showing fine in struts project but not in JSF2 project. All the css and buttons are rendering fine except image that has url in css.

Folder structure

resources -> css -> bootstrap.min.css
resources -> img -> glyphicons-halflings.png

bootstrap.min.css

background-image: url("../img/glyphicons-halflings.png");

1 - if I use <h:outputStylesheet library="css" name="bootstrap.min.css"/> than background-image url generated is http://localhost:8000/img/glyphicons-halflings.png thus image not loading. It should be http://localhost:8000/resources/img/glyphicons-halflings.png

2 - If I use <link href="#{request.contextPath}/resources/css/bootstrap.min.css" rel="styleSheet" type="text/css"/> than

Firefox -> Firebug -> Net tab {resources added multiple times}

http://localhost:8000/resources/resources/img/glyphicons-halflings.png

not sure how to load image which is in css and applied on class.

show EDIT icon as link to click to next page.

 <h:outputLink value="edit.xhtml" >
                            <i class="icon-edit" ></i>
                            <f:param name="id" value="#{person.id}"/>
                        </h:outputLink>

Answer

You should be using the EL variable #{resource} in CSS to specify image resources.

background-image: url("#{resource['img/glyphicons-halflings.png']}");

See also:

How to reference JSF image resource as CSS background image url