On 26 oct, 05:41, ailinykh <[email protected]> wrote:
> Hello, everybody!
> I try to manipulate with background image and background position.
> I need to change background image and background position on the fly.
> What I have is a couple of images:
>
> @sprite .i1 {
>                         gwt-image: 'image1';
>                         width: 65px;
>                         height: 12px;
>                         cursor:pointer;
>                 }
>
>         @sprite .i2 {
>                         gwt-image: 'image2';
>                         width: 65px;
>                         height: 12px;
>                         cursor:pointer;
>                 }
>
> and bunch of positions:
> .pos1 {
>                         background-position: -65px 0px;
>         }
>
> .pos2 {
>                         background-position: -52px 0px;
>         }
>
> <ui:style type='MyStyle'>
>
> then at run time I do something like this:
>
> @UiField MyStyle style;
>
> getElement().addClassName( style.i1);
> getElement().addClassName( style.pos1);
>
> When I look at result in browser I see that
> gwt-image: 'image1';
> line is totally expanded. I see something like this
>
> background: url(data:image/png;base64,ig ... K5CYII=) no-repeat 0px
> 0px;
> background-image: url(data:image/png;base64,iVBO ... CYII=);
> background-repeat-x: no-repeat;
> background-repeat-y: no-repeat;
> background-attachment: initial;
> background-position-x: 0px;
> background-position-y: 0px;
> background-origin: initial;
> background-clip: initial;
> background-color: initial;
>
> It has
> background-position-x: 0px;
> background-position-y: 0px;
>
> which overrides background position coming from my second style. Any
> ideas how to remove background position from first css?

You shouldn't use @sprite if you intend to "do spriting yourself";
instead, use a DataResource and @url.
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#References_to_Data_Resources

Something like:
@url image1Url image1;
.i1 {
   background: image1 no-repeat;
   width: 65px;
   height: 12px;
   cursor:pointer;
}
.pos1 {
   background-position: -65px 0px;
}

-- 
You received this message because you are subscribed to the Google Groups 
"Google Web Toolkit" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.

Reply via email to