25

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>

img

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Pirzada
  • 4,685
  • 18
  • 60
  • 113

1 Answers1

50

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

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

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Thanks. I will test it and mark your answer accepted asap. Can you reply to this question as well http://stackoverflow.com/questions/13573178/jsf2-tomahawk-selectoneradio-render-label-separately . Easy for you. – Pirzada Nov 26 '12 at 21:09
  • For projects that generate their own css this is easy, but the are several plugins and themes that has their own bunch of css this is horrible to change every single external css for this. Is there any other way? I have the same problem but its very difficult to open every single css and change that line – maxtorzito Nov 01 '13 at 17:42
  • @maxtorzito: checkout OmniFaces `UnmappedResourceHandler` (or ... use editor's builtin find&replace functionality, Eclipse has one even supporting regex) – BalusC Nov 01 '13 at 18:03
  • 1
    @BalusC thank you i tested right now and works with any change in css file!!!! UnmappedResourceHandler is great!! Thanks a lot – maxtorzito Nov 01 '13 at 18:41