How to set background url for css files in thymeleaf?

Viewed 29090

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?

4 Answers

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>

An alternative is:

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

that is all

    <body th:style="'background-image:url(' + @{/images/background.jpg} + '); background-repeat: no-repeat, repeat; background-size: cover;'">
    </body>
Related