Background

All components, as well as any stage, have a background

A background can be a color, a gradient, an image or a video. Here’s how.

Solid Color Background

1. Select the Solid option from the background type dropdown
2. To edit the color just click the color circle to open the color selector and select the color to use

Tip: it’s often handy to have for example the hexadecimal codes of your brand colors at hand, so it’s as simple as copy paste onto the color picker interface.

Gradient Color Background

1. Select the Gradient option from the background type dropdown
2. To edit a color point, click to select it, and then click on the larger color circle to open the color selector
3. To reposition a color point simply drag it horizontally
4. To delete a color point, click to select it, and then click the small cross icon

Image Background – Full

1. Select the Image option from the background type dropdown
2. Click Add or change image to set an image
3. Set the size value to Cover
4. Set the repeat value to No Repeat
5. Optionally change the position value to adjust image placement
6. Optionally change the Attachment value to fixed if you want the image to stay fixed while the user scrolls down.

Important: since the background will be covering the space the content occupies, it is particularly important to check how it looks on mobile. If the component with the background gets too wide or too tall, the image may become blurred if its resolution is not high enough.

Image Background – Pattern

1. Select the Image option from the background type dropdown
2. Click Add or change image to set an image
3. Set the size value to Auto, or optionally to Custom. If you chose Custom, then configure the Width (W) and Height (H) attributes in pixels. It is recommended that you set values that maintain image ratio or you may get a blurred result.
4. Set the repeat value to In both directions
5. Optionally change the position value to adjust image placement
6. Optionally change the Attachment value to fixed if you want the image to stay fixed while the user scrolls down

Video Background

1. Select the Video option from the background type dropdown
2. Select which video source you wish to use
3. Set the Containment value to Cover
4. Set the Video Url to a URL from the video source you have selected