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!

The image is not loaded?

Pau Kiat Wee
– Pau Kiat Wee

2012-05-29 13:09:33 +00:00
Commented May 29, 2012 at 13:09 — Pau Kiat Wee
– Pau Kiat Wee, Commented May 29, 2012 at 13:09
I cannot get the image to load - yes!

Bitmap
– Bitmap

2012-05-29 13:12:04 +00:00
Commented May 29, 2012 at 13:12 — Bitmap
– Bitmap, Commented May 29, 2012 at 13:12

Bitmap · Accepted Answer · 2012-05-29 13:34:09Z

20

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').

edited May 29, 2012 at 13:34

Bitmap

12.6k17 gold badges68 silver badges92 bronze badges

answered May 29, 2012 at 13:16

zbrukas

3261 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vetsin Over a year ago

It seems to be the only good solution and saves a lot of headache.

Zuul · Accepted Answer · 2012-05-29 14:17:29Z

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!

edited May 29, 2012 at 14:17

answered May 29, 2012 at 13:16

Zuul

16.3k6 gold badges63 silver badges88 bronze badges

1 Comment

Bitmap Over a year ago

Thanks Zuul - I have tried that but doesn't work neither. I think it is some how the way Spring is intercepting and translating the url.

Collectives™ on Stack Overflow

Spring CSS image loading

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related