How to set background url for css files in thymeleaf?

A

5

8

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?

Ahmed answered 4/3, 2016 at 6:36 Comment(0)

A

13

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.

Ahmed answered 4/3, 2016 at 6:36 Comment(3)

How would i do this for aurl string? – Monopoly 20/12, 2017 at 2:41

@Ahmed Hi, I know this is an old subject, but did you please add a particular resource handler ? if yes could you please share ? Thank you – Fixed 14/8, 2020 at 20:50

@Fixed No need for any ResourceHandlers. If you can add this to any Thymeleaf template it should work fine. – Ahmed 3/9, 2020 at 18:50

S

7

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

Sipple answered 18/10, 2020 at 14:27 Comment(0)

H

6

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>

Heterocercal answered 2/11, 2018 at 16:27 Comment(0)

D

4

An alternative is:

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

that is all 😉

Defazio answered 16/4, 2019 at 23:19 Comment(1)

not work for me. this work for me th:style="'background:url('+ @{/image/login-background.jpg} +');'" – Pleiades 6/9, 2019 at 1:34

C

0

When want to get the image from object, you can do like this.

<a th:href="@{/}" class="block-20" th:style="'background-image: url('+${item.mediaContents.get(0).url}+');'">

If you want to get the image from static path, you can do like this as mentioned by Jorge above.

<a th:href="@{/}" class="block-20" th:style="'background-image: url('+@{/images/bg_18.jpg}+');'">

Canterbury answered 6/5, 2023 at 10:46 Comment(0)

Recommended topics

Hot tags