CODEWITHSUNDEEP
javacssvaadin
user2486322
user2486322

Reputation: 867

Vaadin - 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

    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;}");
     }

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

Upvotes: 1

Views: 308

Answers (1)

Vikrant Thakur
Vikrant Thakur

Reputation: 725

You should add a style (say "changed-background") on button click:

button.addClickListener(...){
   myLayout.addStyleName("changed-background");

}

In your theme SCSS file, add a custom style 

.changed-background{
    background: url(icons/material_wallpaper.jpg) no-repeat center center fixed;
}

Upvotes: 2

Related Questions