What should be the value of image url in css file which is under resources folder and this resource folder is mapped as default servlet in spring?

Question

I am creating maven spring java web application. I placed a mapping in web.xml for default servlet which maps to the resources folder under web app folder. Now under this resources folder I have three folders :

img, css, html.

I have a jsp page under web-inf folder. From this jsp page I am pointing css and from css I am setting background image which is in img folder.

css is getting included in jsp page successfully while background image is not getting loaded unable to resolve and find the accurate path for image to be defined under url() method.

Below are my resources snippet:

1. css file :

   body {

    height : 70%; background-image: url('/resources/img/images1.jpeg'); background-size: cover; background-repeat: no-repeat; z-index: -1; 

   }

2. web.xml :

    <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>/resources/*</url-pattern> </servlet-mapping> 

Please provide some solution and explain this concept of including images?

Answer 1

When importing CSS stylesheets by , the stylesheet is imported and processed by the FacesServlet through /javax.faces.resource/*. Look at the generated element pointing to the stylesheet in question and you'll understand.

You have to change all url() dependencies to use #{resource['library:location']} instead. JSF will then auto-substitute it with the right path. Given your folder structure, you need to replace

.c2 {
    background: url("/resources/images/smiley.jpg");  
}

by

.c2 {
    background: url("#{resource['images/smiley.jpg']}");  
}

How to reference CSS / JS / image resource in Facelets template?