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>
Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.
Right-click on the image and select Copy Image Link. Paste the address into a new email. Or paste it into a new browser window. Or paste it into a text editor.
The background-repeat property specifies whether the background image will repeatedly display until it fills up the entire area of the element the background is being applied to or if the background image will be displayed only once.
You should be using the EL variable #{resource}
in CSS to specify image resources.
background-image: url("#{resource['img/glyphicons-halflings.png']}");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With