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