Server context-path and images url in CSS

Question

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

score 2 · Accepted Answer · answered Oct 06 '16 at 22:50

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");

1 Answers1