CODEWITHSUNDEEP
gwt
Cyclope
Cyclope

Reputation: 131

GWT background image

I am using gwt for showing a dynamic image inside a td and the image is coming from a imagebundle but its showing the whole big image, which gwt makes during compilation, inside that td rather than showing specific part from that big image. I don't know what I am missing here... The problem is the image will be added and selected dynamically and I can't define a css everytime I add an image. If anyone of you can help me regarding it. Here is my code

My table cell is defined inside the UiBinder something like....

    <ui:style>
          .colourPickerCell {
             background-repeat:no-repeat;
          }
    </ui:style>

         <tr>
            <td class="{style.colourPickerCell}" ui:field="colourPreviewSlot" rowspan="3" width="50%"></td>
        </tr>

Function inside the presenter class:

    public void newColorSelected(Image patternImage) { 
            Style patternImageStyle = patternImage.getElement().getStyle();
            Style style = getColourPreviewSlot().getStyle();
            style.setWidth(patternImage.getWidth(), Unit.PX);
            style.setBackgroundImage(patternImageStyle.getBackgroundImage());
            style.setLeft(-patternImage.getOriginLeft(), Unit.PX);
            style.setTop(-patternImage.getOriginTop(), Unit.PX);
            style.setHeight(patternImage.getHeight(), Unit.PX);

        }

When I debug my code I get the html for patternImage object as:

            <img id="..." style="backgrond:url(....) no-repeat -149px 12px;"/>

Best regards,

Upvotes: 2

Views: 2231

Answers (1)

Arcadien
Arcadien

Reputation: 2278

If you are using this image as a background sprite, it think you have to use background-position css property to "move" your image "behind" the td.

"left" and "top" properties are relative to the element you set the style on, not its underlying background image.

Upvotes: 1

Related Questions