Concat strings in CssResource to create a url

Question

I have some CSS in a ClientBundle that uses a background url. Since I load the javascript (/MyModule/MyModule.nocache.js) from /index.html, my relative urls in CSS are from root. This means

.myBackground { background: url("images/background.png"); }

will try to load from /images/background.png. This seems like a perfect case for runtime css substitution. I added the following line to the top of my css file:

@eval moduleName com.google.gwt.core.client.GWT.getModuleName();

How do I now combine the moduleName variable with the string "images/background.png"?

I'm looking for something like:

@eval moduleName com.google.gwt.core.client.GWT.getModuleName();
.myBackground { background: url(moduleName + "images/background.png"); }

Unfortunately, this approach causes some errors in the output during compile:

Line 46 column 30: encountered " ". Was expecting one of: <NUMBER> <PERCENTAGE>
<PT> <MM> <CM> <PC> <IN> <PX> <EMS> <EXS> <DEG> <RAD> <GRAD> <MS> <SECOND> <HZ>
<KHZ> <DIMEN> <FUNCTION>

Note: I know, there's CSS Sprites, and I'm using that in some places, but I can't get those working correctly in this case because of GWT's extra style information around a CSS sprite conflicting with the extra style stuff I need.

Answer 1

I'd add this as a comment, but I don't have enough reputation...

I'm not exactly sure what you mean by "GWT's extra style information around a CSS sprite conflicting with the extra style stuff I need", but if you are referring to additional background properties you need to specify, have you tried splitting up background into it's constituent parts? E.g., background-image, background-position, etc. This recently solved an issue I was having with sprites.