Background Colors

This topic describes how to customize the background color of your panel in the Panel Studio. You can also upload an image and set the image as the background.

Overview

You can customize the background color or upload an image when you configure the background. You can choose among the following settings:

• Background color: supports a single color or a gradient color:

  • Single-color background: applies to the full screen and a specific part.
  • Gradient-color background: classified into the linear gradient and radial gradient styles.

• Background image: allows you to upload an image in a specific format.

  

Procedure

Configure a single-color background

• Full-screen color
  Select the canvas, and in the top right corner of the page, choose Style > Background > Bg Color to open the color picker and select a preferred color.

  

• Part color
  Select the title bar on the canvas, and in the top right corner of the page, choose Style > TopBar > Bg Color to open the color picker and select a preferred color.

  

Configure a gradient-color background

Gradient-color background is classified into linear gradient and radial gradient styles.

• The linear gradient style allows you to use gradient colors from a start point to an end point through an axis. The user can change the angle above the color picker to adjust the gradient position. The default angle is 90˚.

  

• The radial gradient style allows you to diffuse outward in an elliptical shape from the center point. You can drag the slider above the color picker to adjust the radius of the diffusion scope.

  

Configure a background image

1. Prepare the background image of the specified size and dimensions.

   Note: The image must meet the following requirements:
   1. Size: not more than 512 KB.
   2. Dimensions: 375 × 667 (can be proportionally scaled).
   3. Format: supports only .png files.

   

2. Select the canvas, and in the top right corner of the page, choose Style > Background > Bg Color > Gallery. Click the plus sign to upload your own image.