Using images as Background image which are defined in client bundle

[Kotuboy]

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

    @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

[Prakash M]

try removing the background property from the style and
add @ImageOptions(repeatStyle = RepeatStyle.Horizontal) to your
ImageResource declaration.

And always try using FireBug to see what style is applied at runtime.
This helps in identifying almost all CSS issues.

-Prakash M.

2011/10/17 Kotuboy <aliy...@googlemail.com>:

> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/google-web-toolkit/-/nkqRfT8JOmQJ.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-web-tool...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-web-toolkit?hl=en.
>

[Kotuboy]

Hi Prakash,

There is now another problem.
I want the image as a background image of button. (As in Standard GWT button.)
It covers all button and I can not see the text on button. It does not look like a button but a normal image.

?????

[Prakash M]

heres the style i got from GWT showcase for a button with background
image + text.

.gwt-Button {
margin: 0;
padding: 5px 7px;
text-decoration: none;
cursor: pointer;
cursor: hand;
font-size:small;
background: url("images/hborder.png") repeat-x 0px -2077px;
border:1px solid #bbb;
border-bottom: 1px solid #a0a0a0;
border-radius: 3px;
-moz-border-radius: 3px;
}

Comparing this with your generated style may give you lead on your problem.

-prakash m.

2011/10/17 Kotuboy <aliy...@googlemail.com>:

> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/google-web-toolkit/-/wAcb_6lg6J4J.

[Sudhakar Abraham]

Add your image in project directory. Add the .gwt-Button Property in
global css file. Edit the property in background:url(your_image)
repeat-x;

.gwt-Button {
margin: 0;
padding: 5px 7px;
text-decoration: none;
cursor: pointer;
cursor: hand;

background: url("images/hborder.png") repeat-x ;
-moz-border-radius: 3px;

}

S. Abraham
www.DataStoreGwt.com
Persist objects directly in Google App Engine

[Kotuboy]

Actually I did not want to cahnge the behaviour of standard CSS of GWT. But I want to to be able to manipulate it.

Therefore I created a CSS file which is identical with Standard GWT CSS file.

But it could not find the images defined in CSS.( i.e. url("images/hborder.png"))

To get this effect I put the image in resources folder. No effect.  (I hava a maven project. )

The second way was from Prakash. It is not exactly what i want but i have no choice at the moment.