1

I have a Spring MVC application from which I am trying to access a CSS file from a JSP file. The CSS in turns accesses an image file.

The CSS works perfectly fine, but the image is not being displayed. I think there is a problem with addressing the image file.

I tried absolute addressing as well as relative-addressing to get the image, but it just doesnt work.

background-image: url("resources/mytheme/images/banner.jpg");
I also tried
background-image: url("../images/banner.jpg");

Can anyone please help me?

My webapp package is as follows

webapp  
 -resouces  
   -mytheme  
     -CSS  
       -template.css  
     -Images  
       -banner.jpg  
 -WEB-INF  
   -jsp  
      -login.jsp  
   -web.xml  
   -dispatcher-servlet.xml  

My login.jsp is as follows

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <!-- Importing the style sheet for the termplate -->
    <link href="<c:url value="/resources/mytheme/css/template.css" />" rel="stylesheet">
</head>
<body>
Hello</body>
</html>

My CSS file is as follows:

#banner {
    text-align: center; 
    background-image: url("resources/mytheme/images/banner.jpg");
    background-repeat: no-repeat;
    background-size: 1500px 250px;
    height: 250px;
}
user3914843
  • 21
  • 1
  • 2
  • 3

1 Answers1

0

I got the answer. I had to specify the static resources in web.xml

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.css</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.js</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.jpg</url-pattern>
</servlet-mapping>
user3914843
  • 21
  • 1
  • 2
  • 3