Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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

like image 426
Pirzada Avatar asked Nov 26 '12 15:11

Pirzada


People also ask

Why can I add background image not showing from CSS?

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.

How do I copy an image url in CSS?

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.

Which background property specifies whether the background image is repeated or not?

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.


1 Answers

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
like image 77
BalusC Avatar answered Oct 29 '22 19:10

BalusC