Using Background Images in CSS with sprite

[Christopher Armstrong]

Hi there,

I'm using GWT 2.4.0 with the GWT + GWTP Eclipse Plugins. I'm trying to add CSS background image using sprite:
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites

But I can't get it to work. Can any of you guys tell me what I'm doing wrong?

Directory Structure is:
client.resources (for CSS files and Images)
+ Resources.java
client.layout (for the overall layout using one slot to render pages)
+ MainView.ui.xml
+ MainView.java
+ MainViewPresenter.java

client.resources.Resources.java

package com.acolsolutions.gwt.homepage.client.resources;

import com.google.gwt.resources.client.*;
import com.google.gwt.resources.client.ImageResource.ImageOptions;
import com.google.gwt.resources.client.ImageResource.RepeatStyle;

public interface Resources extends ClientBundle {
	@Source("logo.png")
	public ImageResource logo();
	
	@Source("teasertext_bg.png")
	@ImageOptions(repeatStyle=RepeatStyle.Horizontal)
	public ImageResource teasertext_bg();
	
	@Source("main.css")
	Style style();
	
	public interface Style extends CssResource {
		String branding_2();
	}
}

client.Layout.MainView.ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
	xmlns:g='urn:import:com.google.gwt.user.client.ui'
	ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
	ui:generateKeys='com.google.gwt.i18n.rebind.keygen.MD5KeyGenerator'
	ui:generateLocales='default'>
	
	<ui:with type="com.acolsolutions.gwt.homepage.client.place.NameTokens" field="nameTokens" />
	<ui:with field='res' type='com.acolsolutions.gwt.homepage.client.resources.Resources' />	

	<ui:style>
		/* MAIN CONTAINER */
		.main {
			width: 710px;
			margin: 0 auto;
			position: relative;
		}
		
		.branding {
			margin-top: 5px;
			margin-bottom: 10px;
			border-bottom: 1px dotted gray;
			margin-bottom: 10px;
		}
		
		@sprite .branding_2 {
			background: #273262;
			gwt-image: "teasertext_bg";
			color: white;
			padding: 7px 20px 5px 20px;
			margin: 0 0 1px 0;
			border-top-right-radius: 10px;
			border-top-left-radius: 10px;	
		}
		
		.branding blockquote {
			font-weight: bold;
		}
	</ui:style>

	<g:HTMLPanel addStyleNames="{style.main}">
    	<g:HTMLPanel addStyleNames="{style.branding}">
    		<g:Image resource='{res.logo}'/>
	   	</g:HTMLPanel>
	   	<g:HTMLPanel addStyleNames="{style.branding_2}">
	   		<blockquote><p>IT Beratung</p></blockquote>
	   	</g:HTMLPanel>

	    <g:SimplePanel ui:field="pageContent">
	    </g:SimplePanel>

	</g:HTMLPanel>
</ui:UiBinder>

I get following error:
20:13:15.998 [ERROR] [homepage] branding_2: Fix by adding .branding_2{}

It would be great if somebody could give me a hint.

Thanks,
Chris