Background settings (Forms)
See also: Style and Effects (Forms)
Flexible Layouts and Widgets offer the option of designing their background. The 'Background' sub-dialog in the 'Style & Effects' properties section is available for this purpose.
Configuration dialog
(1) Background color: Defines any background color and its visibility (from 0 transparent to 1 fully visible). If no color is defined here, the basic background remains transparent.
(2) Layers: One or more background layers can be defined here. A layer can be either an image, a linear or a radial color gradient. The Add image or color gradient function can be used to add a new layer via a corresponding selection list. Layers are added in the order in which they are listed from top to bottom. Layer 1 is drawn first, then layer 2, then layer 3 and so on. The layers are superimposed accordingly. The order can be changed later using drag & drop.
Background layers
Image
|
Configuration |
Result |
|
|
|
A background image can be loaded via a specific or relative URL. The URL can be determined either statically or via the calculator symbol using a Calculation expression. The Select button also offers the option of selecting an image from the existing assets (these can be uploaded via the file manager).
More detailed settings (such as Position, Size, Repeat and Scroll behaviour) can be made by expanding the More settings ... section.
The layer can be removed again by clicking on the trash can symbol.
Linear gradient
A color gradient that runs linearly in a defined direction.
|
Configuration |
Result |
|
|
|
A gradient is defined by at least two colors in the Colors list. A visibility (from 0 transparent to 1 fully visible) can also be defined for each color. Entries in the color list can be reordered using drag & drop. Colors can also be added using the Add color function or removed using the trash can icon. The start and end point of the color gradient and also the intermediate gradations (for more than two colors) can be influenced using the sliders in the preview area (each color also has a slider). The sequence of sliders naturally corresponds to the sequence of colors in the color list. Consequently, the color list is reordered if the order of the sliders is changed and vice versa.
With a linear gradient, an Angle can also be defined in degrees. This influences the direction of the gradient (e.g. 90 – from left to right, 180 – from top to bottom, 135 – from top left to bottom right, etc.).
More detailed settings (such as Position, Size, Repeat and Scroll behaviour) can be made by expanding the More settings ... section.
The layer can be removed again by clicking on the trash can symbol.
Radial gradient
A color gradient that runs in a circle from the center to the outside.
|
Configuration |
Result |
|
|
|
The setting options and functions correspond to those of the linear color gradient, except that no angle can be set.
More settings ...
In addition to the specific settings, other settings such as Position, Size, Repeat etc. are available under More settings ..., regardless of the layer type.
►NOTE◄ If a property is left empty, the default valid for the element is adopted (e.g. by a defined style).
(1) Repeat
Defines whether, how and in which direction the background is repeated.
The following options are available for the X and Y directions.
|
Name of option |
Explanation |
Result |
|
No |
The background is not repeated. |
|
|
Yes |
The background is repeated by joining it together without spacing. |
|
|
Yes, allow spacing |
Fills the spaces between the individual instances so that the available space is filled. |
|
|
Yes, scale if necessary |
Scales the instances so that they are not cut off, as is the case with 'Yes'. |
|
(2) Position and Offset
The buttons can be used to set the position of the background in the X and Y directions (x: left, center, right, y: top, center, bottom).
If a direction is not set to 'center', an offset can also be specified. This shifts the background relative to its defined border. The offset can be specified in pixels (px), percent (%) or relative to the font size (em).
(3) Size
Three size settings are available.
|
Name of option |
Explanation |
Result |
|
Contained |
Scales the background so that it fills the available area in the closest direction. |
|
|
Covering |
Scales the background so that the available area is completely filled. |
|
|
Custom |
Shows fields for entering the width and height. |
Example width: 50px |
(4) Scroll behaviour
Defines how the background layer behaves when scrolling overflowing content.
The following scroll behaviours are available.
|
Name of option |
Explanation |
Result |
|
Doesn't scroll |
The background is fixed relative to the visible surface. |
|
|
Scrolls with content |
The background is fixed relative to the content and is therefore moved along with the scrolling. ►NOTE◄ If the background is too small, it will be moved out of the viewing area. |
|
|
Fixed in window background |
Positions the background at the top left corner of the application (e.g. the browser window). If the 'Relative to element' option is activated, the background is no longer aligned with the app origin point, but at the top left corner of the element. However, this alignment only occurs once at runtime when the element is initialized, otherwise the effect would be obsolete. ►NOTE◄ The effect only works if the element itself changes its relative position, e.g. by being 'scrolled away' or moved. |
Example (without 'Relative to element' option)
|
Color blending
The 'Color blending' setting is only available if the layer overlays another layer or a background color is set. This defines how the colors between the current layer and the underlying layers are offset against each other. Various algorithms are available for this (e.g. Difference, Multiply, Hard-Light, Soft-Light, ...). By clicking on an overlay option, the corresponding algorithm is activated. If no mode or 'Normal' is selected, the color of the current layer always dominates.
