Search code examples
spring-bootthymeleafcontextpath

Server context-path and images url in CSS

I developped a spring-boot application using thymeleaf as template. I use server context-path in my application.properties.

server.context-path: /myapp/v1.0

When I need to display images in my views.html I use this syntax 

<img th:src="@{/img/first.png}" />

Everything is cool

But when I need to use images in my css file it dosn't work

/* Search input */
input.search-input {
    text-align: left;
    background-image: url('/img/search.png');
}

Woukd you have any idea ?

Thanks for your answers

Solution

  • In CSS file you should reference images using relative paths.

    If your folder structure looks like (starting in src/main/resources):

    .
├── application.properties
├── static
│   ├── css
│   │   └── style.css
│   └── img
│       └── first.png
└── templates
    └── index.html

    you should reference image in a way:

    background-image: url("../img/first.png");