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?
Thank you,
Andrey
--
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.
