Setting background image via CSS

Flow
1

I am migrating a Vaadin 12 app to 24 and one hurdle I can’t solve is setting images via css. I have tried it like this:

.client-view {
    background-image: url("./images/background_order.jpg");
}

But it can’t find the image. The path is correct (frontend/themes/my-theme/images) and in the browser console I am getting a 404 error.
What am I missing?

2

Is the folder really frontends or is that a typo? Is anything else from your theme applied/loaded?

3

Sorry, yeah, that was a typo in my question I missed. The path is “frontend” in reality. An yes, the styles work fine.

4

Hm, then it might be a bug. I would recomment create an issue in our github repository.

5

I can not reproduce this (e.g. a theme image is loaded as background from the style). Could you please also provide the versions and the exact directory structure (e.g. I used the “new” src/main/frontend/themes/my-theme location)

6

I am using Vaadin 24.4.10. The directory structure is src/main/frontend/themes/my-theme. I don’t know if it helps but In the browser console I can see that the image URL results in a 404 (url-to-my-app/context-path/images/background_order.jpg in this case).

7

Just a general note: 24.4 is unsupported - so it might be possible that’s a bug with this old version

8

So, interestingly, it kind of fixed itself. I had the frontend folder under src/main. In another vaadin 24 project we have I saw that the frontend folder is under the project root. So I wanted to move it there to see what would happen. I misclicked, moved the frontend folder under src. The frontend build failed, so I moved the frontend folder back to src/main. And, well, it all works now. It is the exact same directory structure as before, so I don’t know why it suddenly works, but at least it works.