Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Dynamic layout background
I’m trying to change the background image of a layout on a button click. I used following css rules to add a background initially and in the button click event I tried to override the css rules.
.appname .v-desktop {
background: url(icons/material_wallpaper.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Overriding code
[code]private void setImage(String url) {
Styles styles = Page.getCurrent().getStyles();
styles.add(".appname .v-desktop {" +"background: url(icons/img.jpg) no-repeat center center fixed;"
+"-webkit-background-size: cover;"
+"-moz-background-size: cover;"
+"-o-background-size: cover;"
+"background-size: cover;}");
}
[/code]
It won’t work as expected. When I check the css rules from inspect element feature of the browser, css rules are overridden correctly. Any help
Hi,
can you store the image names in your css file? In that case, you should be able to get away with just changing the css class name with add/removeStyle.
-Olli