Set background image for layout,not working

Flow
1

Hi, i’m novice in Vaadin.
I need a help with background image for layout, … not working
Platform: Windows 10, Vaadin 8.15.


My image file: /resources/background_images/primary_theme_abstract_wallpaper.jpg


My mytheme.scss:

When i’m click on the image path, Idea is open my image correctly and show path(Like: C:\USERS.….…)

@mixin mytheme {
@include valo;
// Insert your own theme rules here
/* Фон */
.custom_background_1{ background-image: url("background_images/primary_theme_abstract_wallpaper.jpg");
}
}


MyUI:

But image don’t show:

@Override
protected void init(VaadinRequest vaadinRequest) {
 final VerticalLayout layout = new VerticalLayout();
 layout.setSizeFull();
 layout.setStyleName("custom_background_1");
 setContent(layout);
}
2

Your path is now pointing to

WebContent/VAADIN/themes/background_images/primary_theme_abstract_wallpaper.jpg

So you probably need move your jpg there or, modify your theme with couple of “…/”'s and “resources/” to point to correct location.

3

Thanks!

4

Hello, do you know how to do it with dynamic style in Vaadin 10? I can not make it work.

…
getStyle (). set (“background-image”, “…”);

Greetings.

5

Thanks, I’ve solved it, I’ll give you the example. Greetings.

…

div.getStyle().set(“background”,“url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_Argentina.svg/800px-Flag_of_Argentina.svg.png)”);

…

div.getStyle().set(“background”,“url(frontend/styles/fr.png)”);

By the way is about to start Argentina vs France, in the football world cup, so the example with those flags;) … je.