Dynamic background image in a panel

I’d like to add a background image to a panel.
I saw I can do that using CSS but I found two problems :

  • I can’t set the image name dinamically
  • I need to put my image into the theme and I want to get it outside the war file

Is it possible ?
Any suggestion ?

You might be able to get away with some hack like putting an Image on an AbsoluteLayout and playing around with z-index and transparency, but it’s probably not going to be nice.

May be I didn’t understand your solution but when I speak about “background” I mean that I will have some other objects (fields and son on) over the image.
I can’t understand how your solution could solve that problem.

CSS z-index allows you to define the order of an element in the z-axis, so towards and away from the screen. So if you have an Image element on the bottom of the z-stack and other components are higher, those components are on top of the image. See more about AbsoluteLayout in the docs:

Tks but is too complex for my needs.

I use this addon for these kinds of problems:


new Dom(this).getStyle().setProperty(“background”,“url(path_to_file)”);

Ha, that’s pretty neat, I have to remember that.

Nice idea but could You suggest in a deeper detail how to use it in my case?

I write in scala, but I suppose it will be easily translated to java:

public class MyPanel(funnyPicture:Boolean) extends Panel{
private val prefix = “https://mysite.com/VAADIN/themes/mytheme/images
private val funny = “funny.png”
private val boring = “boring.png”

private val dom = new Dom(this)

private val path = if(funnyPicture){
prefix + funny
} else {
prefix + boring