Spring CSS image loading

Question

I am using Spring 3.0.7 for my web application. I want to load an image from my resource location in a CSS file like this:

.tag {
    background: transparent url(/resources/img/bg.gif) no-repeat;
    background-position: 0 50%;
    padding-left: 50px
}

I can easily load my static resource in jsp file as shown below without any issues:

<c:url value="/resources/css/main.css" />

My static resource handler has been configured as shown below:

<mvc:resources mapping="/resources/**" location="/web-resources/"/>

As said ealier, I can load resources in jsp files without an issue, but cannot get the image to load in my CSS. Can anyone help load the image in the CSS file!

Solution 1

If your folder tree is something like this:

+resources 
 -css
   -main.css

 -img
  -lots_of_img.jpg

Then is easier just to url('../img/bg.gif').

Solution 2

The CSS path is relative to the CSS document location:

.tag {
    background: transparent url("resources/img/bg.gif") no-repeat;
    background-position: 0 50%;
    padding-left: 50px
}

or

.tag {
    background: transparent url("../resources/img/bg.gif") no-repeat;
    background-position: 0 50%;
    padding-left: 50px
}

or based on the structure logic

.tag {
    background: transparent url("../img/bg.gif") no-repeat;
    background-position: 0 50%;
    padding-left: 50px
}

It all depends on your directory structure!

You can read more about this here and here!