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;
}