Can you reference images from css without using relative paths?

Question

I'd like to create a div with a background image css:

#mydiv {
  background-image:url('/public/images/foo.png');
  background-repeat: repeat-x;
}

Now, I can't use routes in css, so as a result I have to use a relative path, or my app will break if installed at a non-root path.

Is there a way around this? Something like

background-image:url('@{publicFolder}/images/foo.png');

I did find this thread from a year ago that claims it's impossible. Is this still the case?

Edit: I know I can inline the css in the page, that's not really an acceptable solution, but rather a work around.

Answer 1

Since the play framework compiles all the files in /public, I used the following statement in the css to acces background images.

background: url("/assets/images/my-image-background.jpg");

It worked for me so far, not sure if it's a good practice though! Hope it can be of help. Cheers.

Answer 2

The path always goes from your stylesheet. So why don't you use relative paths?

Example, your css is in /public/css/, so your path in your css file has to be ../images. That's it.

But maybe less.css has something similiar you're looking for.