How to set background url for css files in thymeleaf?

问题

I have a thymeleaf template where I don't have CSS files imported and wanted to declare style attribute for the body element with background-image: url{/image.jpg} property with relative image URL. I wanted to load the URL without including the application context name(/myapp/) it. It is similar to the problem over here, except it din't work for me.

CSS:

<style>
body {
    background: url(../img/Background.jpg)
                no-repeat center center fixed;
    background-size: cover;
}
</style>

But the above CSS doesn't work and it accessed the image at

http://localhost/img/Background.jpg.

So, I had to give the value as url(/myapp/img/Background.jpg) for the image to load properly.

I have the mvc:resources configuration properly set in spring-context.xml for /img/ request to load properly and it works in other places.

spring-context.xml

<mvc:resources mapping="img/**" location="/WEB-INF/img/" />

So how to load the background url image css value dynamically using thymeleaf's relative url?

回答1:

So, here's how to set dynamic relative paths in background image url property in the css using thymeleaf's inline text value,

<style th:inline="text">
    body{
        background: url{[[@{/img/Background.jpg}]]}
                    no-repeat center center fixed;
    }
</style>

which loads the image using relative path and we don't have to specific the 'myapp' context name in the url.

回答2:

An alternative is:

<body th:style="'background: url(/img/la-paz-city.jpg) no-repeat center center fixed;'">
...
</body>

that is all 😉

回答3:

In my case that helped: change brackets from curly to round

<style th:inline="text">
body{
    background: url([[@{/img/Background.jpg}]])
                no-repeat center center fixed;
}
</style>

来源：https://stackoverflow.com/questions/35789526/how-to-set-background-url-for-css-files-in-thymeleaf

标签

css

background-image

thymeleaf

relative-path