The background attribute of presentation components can only accept a color specification. If you need a background image for a component, there is no direct way of specifying one. Fortunately, there is a way, and it may surprise you — A label is a full-fledged container just like a panel is! This allows you to simulate a background image for a component simply by making the component transparent or translucent, and putting it inside a label that has the desired image as its icon.

In the following example, we put a transparent split pane inside a label showing the desired image. This creates the illusion that the split pane itself has that background image. The image shows through the left and right panes of the split pane because the background color of both panels has an alpha channel value that is less than FF, making them translucent.

Make this object in eNode Sandbox. The result should be similar to the following:

In the following example, we make the right pane transparent by substituting the panel element’s background attribute with opaque="false". Alternatively, we could have set the alpha channel value to 00 to achieve the same effect.

Make this object in eNode Sandbox. The result should be similar to the following:

For an advanced example, see Transparency and Translucency in tables.