How to use image in global css

[Alex Luya]

Below is my code:

public interface Resources extends ClientBundle
{
@NotStrict
@Source("Global.css")
CssResource css();
}

@Override
public void onModuleLoad()
{
Resources resources = injector.getResources();
resources.css().ensureInjected();
....
}
//Global.css

.rule1{
background:url(images/img1.png);
}
If referring images like,as you can see in rule1,
"background:url(images/img1.png);"(images directory is under war
directory),"img1.png" can't be loaded properly in dev mode,but it got
loaded in web mode.So Question are: 1, how to use image in this
Global.css? 2,Is it possible to use image sprites here?

[Joseph Lust]

To start with, I like to utilize the public/ folders in my packages for storing these values. That way, if you put images in any public/images/ folder  (I put a public/ folder in every module), they will end up in your war in the images/ folder.

First make sure that the above is working correctly for you. You can also utilize an ImageBundle which will assure you the images are available through compile time checking. I find this the best solution.

With an ImageBundle your rule becomes:

@sprite

.rule1 {

gwt-image:'img1';

}

To investigate this further use FireBug or Chrome dev tools to find what image resource your .rule1 is pointing at. That will probably reveal the problem.

Sincerely,

Joseph