Using Background Images

This product version has reached end of life and is no longer supported. Click here for the latest documentation.

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:

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.

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.

Select the widget that will hold the background image.

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

Example

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. T he background image is set.