Docs ยท Projects
Background
The Background properties are used to add background effects for components.
From the properties of the component you can select:
- Upload an image: From your computer.
- Pick Datachip: You can pick an image as a datachip from the Datastore.
- Colour: Sets the background colour of a component.
- Blend mode: Sets how an element's background images should blend with each other and with the element's background color.
- Image Repeat: Sets if/how a background image will be repeated. This property may have the following values:
| Setting | Description |
|---|---|
| Initial | Sets this property to its default value. |
| No Repeat | The background image is not repeated. The image will only be shown once. |
| Repeat | The background image is repeated both vertically and horizontally. |
| Repeat X | The background image is repeated only horizontally. |
| Repeat Y | The background image is repeated only vertically |
| Revert | Lets you 'undo' styles applied to a component, going back to the parent component. |
| Round | The background image is repeated and squished or stretched to fill the space (no gaps). |
| Space | The background image is repeated as much as possible without clipping. |
- Image size: Specifies the size of the background images. This property may have the following values:
| Setting | Description |
|---|---|
| Auto | Default value. The background image is displayed in its original size. |
| Contain | Resize the background image to make sure the image is fully visible. |
| Cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges. |
| Inherit | Inherits this property from its parent element. |
| Initial | Sets this property to its default value. |
| Revert | Lets you 'undo' styles applied to a component, going back to the parent component. |
- Image position: Sets the starting position of a background image.
The background of a component affects the entire area covered by that component, including any padding that may be defined. For example, If you set a background colour or image for the button component in an app, it will cover the entire button area, including the padding.