Using images as Background image which are defined in client bundle

Question

I am trying to use an image as a background of a button. I defined the image as a resource in client bundle.

public interface MyResources extends ClientBundle {
        @Source("image/hborder.png")
        ImageResource hBorder();
}

In the css file, I tried to reference this image with the following code

.gwt-Button {   
margin: 0;
padding: 3px 5px;
text-decoration: none;
font-size: small;
cursor: pointer;
cursor: hand;   
gwt-image:'hBorder' ;
background: repeat-x 0px -27px;
border: 1px outset #ccc;

}

But the image is not shown. What should I change??

Where is the problem..?

Thanks

kayser

Answer 1

You need to add: @sprite and remove background:

@sprite .gwt-Button {
   ...
   gwt-image:'hBorder';
   border: 1px outset #ccc;
   ...
}

Works to show the image, but note that also resizes the widget to the image's size.