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!

Answer 1

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.