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