CODEWITHSUNDEEP
cssgwt
chris
chris

Reputation: 437

GWT ImageResource accessed within a CSS property?

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

Upvotes: 36

Views: 4020

Answers (4)

Christian
Christian

Reputation: 4094

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.

Upvotes: 1

corning
corning

Reputation: 401

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

Upvotes: 1

Azeez
Azeez

Reputation: 328

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.

Upvotes: -1

Umit
Umit

Reputation: 61

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

Upvotes: 1

Related Questions