GWT ImageResource accessed within a CSS property?

Question

The Google/GWT example of creating an ImageResource is understood:

interface MyResources extends ClientBundle {
  @Source("image.png")
  ImageResource image();

  @Source("my.css");
  CssResource css();
}

@sprite .myImage {
  gwt-image: 'image';
}

I understand how to use ImageResources and apply style names, however...

In my application, I have multiple themes that are applied to various widgets using CSS and deferred binding. So I have defined a CSS rule ('background') that I would like to use the .myImage class, but it does not do anything:

background {
    background-attachment: fixed;
    background-image: .myImage;  //??  This is the question!
    background-size: contain
}

What is the syntax for using the .myImage class within the 'background' CSS property? It seems I should be able to specify the .myImage class as the argument for background-image.

Edit: Did some more research and found the correct syntax to do this using a DataResource.

MyClientBundle extends ClientBundle {

    //Background Image
    @Source("resources/background.png")
    DataResource backgroundImage();

}

(mypanel.css)

@url background backgroundImage;

.myPanel {
    border-radius: 0px;
    background-color:#ffffff;
    opacity:0.6;
    background-image: background;
}

I just tested this using GWT 2.6 and you can use an ImageResource in your ClientBundle and it'll work as-well. I just figured I'd give it a try since it looks a little nicer to me. — MattWeiler, Mar 25 '15 at 18:16
Btw., as far as i understand stackoverflow, I think it would be better to post your edit as an answer to you own question and accept your answer. Your question woudn't be an open question anymore. — markus_, Nov 07 '16 at 10:19

score 1 · Answer 1 · answered Feb 19 '14 at 19:30

1

If you add "myImage" as style name to any widget, it will set those widgets' background...

answered Feb 19 '14 at 19:30

Umit

61
1
4

corning · Answer 2 · 2018-04-02T18:12:16.573

1

the syntax for using the .myImage class within the 'background' css property

MyClientBundle extends ClientBundle {

        //Background Image
        @Source("resources/background.png")
        DataResource backgroundImage();
    }

(mypanel.css)

@url background backgroundImage;

.myPanel {
    border-radius: 0px;
    background-color:#ffffff;
    opacity:0.6;
    background-image: background;
}

edited Apr 02 '18 at 18:12

answered Apr 02 '18 at 17:38

corning

361
5
20

Why does this answer the question being asked? There's no explanations – Sterling Archer Apr 02 '18 at 17:57

score 1 · Answer 3 · answered May 02 '19 at 14:53

I think the correct way is to define @ImageOptions and the rest to define in the css-class itself.

For me the following code

Theme.java

public interface Theme extends ClientBundle {

  @ImageOptions(repeatStyle = RepeatStyle.None, preventInlining = true)
  @Source("path/logo.png")
  ImageResource logo();

  @Source("theme.css")
  ThemeCss css();

  interface ThemeCss extends CssResource {
      String logo();
  }

}

theme.css

@sprite .logo {
  gwt-image: "logo";
  background-size: contain;
  background-attachment: fixed;
}

produces this output:

.GLOMG3GI {
  height: 344px;
  width: 633px;
  overflow: hidden;
  background:url(data:image/png;base64,iV...=) -0px -0px no-repeat;
  background-size: contain;
  background-attachment: fixed;
}

You can overwrite any css property you want after the gwt-image property or by using ImageOptions.

score -1 · Answer 4 · edited May 23 '17 at 11:45

You can use the style like this myResources.css.myImage. I mean wherever you want to use the style in UiBinder you can use it by using the styleName property with this value.

In your case wherever you are applying the class .myPanel, you can apply the styleName='myResources.css.myImage', to apply the background image.

If you want use this in java (i.e., Without UiBinder), you can use like this

MyResources myResources = GWT.create(MyResources.class);
widget.setStyleName("myResources.css.myImage");

here widget is the object of the Widget, to which you want to apply the Background.

I recommend you to look at this Explanation, for clear understanding.

GWT ImageResource accessed within a CSS property?

4 Answers4