In your web screens or web blocks use background images in your widgets with styles. These images don't interfere with the position of existing widgets on the screen, thus allowing you to fill your application background with images without any further design work.

Additionally, you can set other options that extend even more the usage of a background image such as, for example, the starting position or if/how is repeated.

How to add a Background image:

  1. Add the Image to your eSpace by right-clicking on the Images folder (on the Interface Layer of the eSpace Tree), selecting the Import Image... option, and selecting the file with the image.

  1. Open the Style Sheet Editor and define a new style for the background image.

Drag the image from the Images folder onto the Style Sheet Editor to automatically create the new style for the image.

  1. Select the widget that will hold the background image.

  1. Set widget Style property to the style created in step 1.


To set a background image on the top right corner of a 'Header' Web Block, proceed as follows:

    1. Edit the Style Sheet of the web block, and define a new style for the background image.

    1. Select the widget to hold the background image in the Web Block: in this case a Container.

    1. Set the Style of the Container widget to the style created in step 1.

    1. The background image is set.

See Also

Overview of Images | Using External Images | Using Database Images