Setting image as background of a panel

would you help me on this

I tried to create a panel with an image set as background and then add a button to it but button is not shown on the background image. instead it is shown on the top of background image.

this is what I have done, I created a theme and inside styles.css I added

@import url(…/reindeer/styles.css);

background-image: url(images/Sunset.jpg);
width: 800px;
height: 600px;

and I created a class that extends panel:

public class Desktop extends Panel{
public Desktop(){
Button mycomputer = new Button(“MyComputer”);
Is there anything I haven’t done?

This looks good to me but have you set the theme for window (or application) using setTheme(“yourtheme”) ?

Judging by the original "
instead it is shown on the top of background image
", I’m guessing yes.

If I understood correctly, you want the sunset to appear as the background of the panel. In that case, your CSS is a little off.

If you’re any familiar with Firebug or similar DOM inspector, you can see from the Panel’s generated HTML structure, that the style name “desktop” is applied to the root element of the panel, but the content of the panel is actually another DIV element.

The content element class (stylename) is .v-panel-content-desktop. So your CSS should be the following:

.v-panel .v-panel-content-desktop {
    background: url(sunset.jpg);

But there’s one more catch when you’re using the Reindeer theme as a starting point: it specifies a background color for the contained layout in the panel as white, so your panel’s background will not show through. In order to overcome that, you need to add this as well:

 .v-panel-content-desktop > div {
   background: transparent;

That should do it.

Yes I have. indeed eclipse plugin did it for me and since it shows the image I can understand that theme is set.
but I found out that If my class extends a Layout instead of Panel it works, but I wonder why.

If I change Desktop class this way:

public class Desktop extends VerticalLayout{
public Desktop(){
Button mycomputer = new Button(“MyComputer”);

it works but I wonder why it does not work for panel.

yes you got my purpose right. I want to show image in the background of panel

I changed the css file but that did not work also.

I chacked the DOM:

<DIV class="v-panel v-panel-webos-desktop [color=#F3670C]
[/color]" style="OVERFLOW: hidden; WIDTH: 929px" __eventBits="128" tkPid="PID2">
<DIV class=v-panel-captionwrap>
<DIV class="v-panel-nocaption v-panel-nocaption-webos-desktop"><SPAN></SPAN></DIV></DIV>
<DIV class="v-panel-content v-panel-content-webos-desktop" style="OVERFLOW: auto; POSITION: relative" __eventBits="16384">
<DIV class=v-verticallayout style="OVERFLOW: hidden; WIDTH: 927px; ZOOM: 1; POSITION: relative; HEIGHT: 88px" tkPid="PID3">
<DIV style="MARGIN: 18px; OVERFLOW: hidden; WIDTH: 891px; ZOOM: 1; POSITION: relative; HEIGHT: 52px">
<DIV style="DISPLAY: block; PADDING-LEFT: 0px; OVERFLOW: hidden; WIDTH: 891px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 26px">
<DIV style="DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 0px; POSITION: relative">
<DIV class=v-button tabIndex=0 __eventBits="7165" tkPid="PID4" role="button"><SPAN class=v-button-wrap><SPAN class=v-button-caption>MyComputer</SPAN></SPAN></DIV></DIV></DIV>

as it is shown there are some other divs also. I’m not sure but I think they may override some styles of webos-desktop.

Jouni is right, I did not read your post carefully enough. The also symptoms match what Jouni said about reindeer theme having white background color for vertical layout in panel.

Something to test:

v-panel .v-panel-content-webos-desktop .v-verticallayout {
background: url(sunset.jpg);

Jouni is much better that I with this CSS stuff, so maybe we hear more ideas…

I was able to make this work exactly like I described, though the correct style prefixes seem to be “webos-desktop” now rather than plain “desktop”. So change the CSS to have .v-panel-content-webos-desktop, and you’ll be set.

And always be sure to properly refresh the server, so no CSS files get caches, which can happen pretty easily with Eclipse and Tomcat. Check from the browser, that you get the updated files, by accessing http://localhost:8080/myapp/VAADIN/themes/mytheme/styles.css (change “myapp” and “mytheme”) with the browser.


I wanted to do the same thing so I have been following this thread. I did exactly as you outlined, but I also have no luck. I know the background image is showing up because I was messing with the Opacity field and actually saw the background image as such:

.v-panel .v-panel-content-webos-desktop {
    background-image: url(mountain.jpg);

.v-panel-content-webos-desktop > div{
      background-color: transparent;

However, when I use the opacity field, all other Vaadin components in the panel also are transparent, which is probably what I am inadvertently doing.

Regardless, background-color: transparent doesn’t seem to do anything.

Any thoughts on differences between our environment and yours?



I was just trying to set the background of a panel Orange. It was easy using a custom theme and

       panel.setStyleName("topic_panel"); // orange

to get the border Orange, but took longer to get the panel centre orange. The comments in this post helped zero in on my problem.

I tried looking in the DOM with Firebug, but for me that is a lot of digging.

Later I just exploded the vaadin jar to look in VAADIN/themes/reindeer/panel/panel.css.

There it is all nicely laid out so I can see what I am fighting. I think it was the lines:

.v-panel-content > div {
background: #fff;
min-height: 100%;

but in any case you can see all the css classes currently in use in your jar relating to panel. Looking in Firebug will allow you to relate to specific text in your display. Similarly, you can look at other components.

Then you can redefine these in your custom theme.

I also had to look up what in css ".v-panel-content > div " means!

Dear Mahmoud
I am wondering Whether we know each other or not , So if " Mofatteh High School " Expression , flashes anything in your mind , kindly please send an email for me to
Best regards
Your ever friend!..

I try to add a background image to my panel. I follow the instructions in this thread but fail.

		Panel panel = new Panel();


@import url(../runo/styles.css);

/* No text transform */
.white .v-table-header-wrap,
.white .v-table-footer-wrap,
.v-table-header-drag {
	text-transform: none;

/* Make table caption bold */
.v-captiontext {

.v-panel-caption-light {
    font-size: 12px;

.v-panel .v-panel-webos-mainScreenUpperPanel {
	background-image: url(_icons/header_BG.jpg);
	width: 800px;
	height: 600px;

DOM: (See attached picture)

Any advice?



More Info:
I know the browser “see” my Style. (See attachment)
However the image is not shown.


Check this one for more aboout…
CSS Image