Dynamic background image in a panel

Vaadin 6 / 7 / 8 Framework UI
1

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 ?
Tks

2

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.

3

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.
Tks

4

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:
https://vaadin.com/docs/-/part/framework/layout/layout-absolutelayout.html

5

Tks but is too complex for my needs.

6

I use this addon for these kinds of problems:

https://vaadin.com/directory#!addon/dom

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

1 Like
7

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

8

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

9

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
}
dom.getStyle.setProperty(“background”,path)
}