CssLayout - dynamically setting background-image

Vaadin 6 / 7 / 8 Framework UI
1

Following the code example from Book of Vaadin (https://vaadin.com/book/-/page/layout.csslayout.html):

CssLayout layout = new CssLayout() {
    @Override     
    protected String getCss(Component c) {
      if (c instanceof Label) {
           int rgb = (int) (Math.random()*(1<<24));        
           return "background: #" + Integer.toHexString(rgb);    
      }         
      return null;     
    }
};

However, if I replace
background: #
 (…) by
background-image: url(some url)
 it won’t work.
Why?

2 
protected java.lang.String getCss(Component c)Returns styles to be applied to given component. Override this method to inject custom style rules to components.

Note that styles are injected over previous styles before actual child rendering. Previous styles are not cleared, but overridden.

Note that one most often achieves better code style, by separating styling to theme (with custom theme and AbstractComponent.addStyleName(String). With own custom styles it is also very easy to break browser compatibility.

Parameters:
c - the component
Returns:
css rules to be applied to component

see vaadin api. it was overridden by stylename which you add or vaadin internal.

3

Sorry, I don’t get it.
Why in the code (the getCss method)
return “background #…”
 works pretty well but

return background-image: …

 not?

4

I’m with Michal on this one. Having the exact same issue.

Examing the element with firebug does not show any overrides anywhere up in the heirarchy.

This does not seem to make sense.

5

I stand corrected. Examination with Chrome web tools eventually shows a “background: white” comming out of a theme file.

Not sure how to work around this, since I need to change this css property programatically.