LayoutPanel - how to set background image?

[Magnus]

Hi,

I have a Layout Panel and I would like a background image.
How can I do that? And how can I make it repeat, horizontally and vertically?

I found that a LayoutPanel does not have a getElement/getStyle method.
So how can I access the element style or how can I realize the background?

Thanks a lot!
Magnus

[Ed]

Use @sprite to set the background image and use the image settings in
de ClientBundle to define the h/v repeat.
See: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html
- Ed

[gerry]

Hi,

Try myLayoutPanel.setStyleName("my-layout-style"). And then in the css
add the rule
.my-layout-style { background-image:...}.It will repeat by default,
unless you set background-repeat:"no-repeat".

I think this would work.

[Sudhakar Abraham]

In Uibinder specify your image on src attribute of <ui:image> tag,
Inside the <ui:style> attribute specify your @sprite.backgroundPicture
tag. Try the below example.

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

<?xml version="1.0" encoding="UTF-8"?>
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>

<ui:image field='backgroundPicture' src='easyxbrl_logo_1.png' />

<ui:style>
@sprite .backgroundPicture {
gwt-image: 'backgroundPicture';
float: left;
margin-top:5px;
margin-bottom:5px;
margin-left: 50px;

}
</ui:style>
<g:LayoutPanel styleName="{style.backgroundPicture}"/>
</ui:binder>