Using with gwt Uibinder a css with background-image set

Question

I have a Class that extends ClientBundle and defining a CssResource. I want to use it in a template Uibinder as css property for the panel (that would be the background. But during running the image isn't shown. Following the code:

Image.css:

 .backgroundPage {
    background-image: url("../resources/Universe-Big-Planet.jpg");
    background-repeat:no-repeat;
/*     background-color: red; */
}

BundleResouces.java:

public interface BundleResources extends ClientBundle {

    public final BundleResources IMPL= (BundleResources) GWT.create(BundleResources.class);

    @Source("../resources/Universe-Big-Planet.jpg")
    ImageResource universeBigPlanet();

    @Source("../resources/Wood_blue.jpg")
    ImageResource woodBlue();

    @Source("Images.css")
    MyStyle mystyle();

    public interface MyStyle extends CssResource{
        String backgroundPage();
    }
}

Home.ui.xml (template):

<ui:with field='res' type='it.myproject.movieuniverse.client.bundle.BundleResources'/> 
.............................
</ui:style>
    <g:DockLayoutPanel ui:field="background" unit="PX" styleName="{res.mystyle.backgroundPage}">

Home.java:

public Home() {
    initWidget(uiBinder.createAndBindUi(this));
            Window.addResizeHandler(resizeHandler);
            resizeWidget();
            BundleResources.IMPL.mystyle().ensureInjected();
        }

If i try to use background-color: red it works, so the css is pointed correctly. I don't know how to solve it, thanks!

Are you sure that background image is accessible by specified path? — cybersoft
I see that you have one image in resources class and in styles. If you want to use image specified in interface, you have to set image directly using IMPL in code. — cybersoft
What's the point of having ImageResources in your ClientBundle if you never use them? — Andrei Volgin

Andrei Volgin Andrei Volgin · Accepted Answer · 2015-06-16T16:59:39

Check in your browser if it tries to load this image. Most likely, the path is wrong.

The path should be to an image publicly accessible on a server, not in your development environment as is the case when you use ImageResource.

In your code you are not using ImageResource at all. If you plan to use it, you don't need to specify a path in CSS.

Using with gwt Uibinder a css with background-image set

1 Answers