The customized background widget allows you to add a background to one or more widgets.

Style

  • Basic Attributes
    • Size: Set the size of the widget by adjusting its width and height.
    • Position: Set the position of the widget by adjusting its abscissa and ordinate.
    • Others: Set the rotation angle and opacity of the widget.
  • Custom Style: If you select this option, you can customize the background style as needed. If you clear this option, you can customize the background color and border radii.


  • Background Color: This option is displayed when you do not select Custom Style. To change the background color of the widget, see Color picker.
  • Border Radius: This option is displayed when you do not select Custom Style. To adjust a border radius, such as the radius in the top left corner, bottom left corner, top right corner, and bottom right corner, enter a value or drag the slider.
  • Custom Background Style: This option is displayed when you select Custom Style.
    • Border Image Source: To change the image in the box, click the Trash icon and upload a local image. To use an image from the Internet, enter the URL of the image.
    • Slice: If you select this option, the borders of the image are cropped to fit.
    • Border Image Style: To adjust the width of the borders of the image, enter a value. The setting takes effect only when you select Slice.
    • Border Style: To change the border style, click the drop-down arrow and select the target style. The borders can be solid, dashed, or dotted.
    • Border Width: To adjust the border width, enter a value. The unit is pixels.
    • Inner Background: To change the color of the inner background, see Color picker.
    • Background Color: To change the color of the outer background, see Color picker.


  • Filter: To adjust the blurring of the widget border, enter a value. The unit is pixels.
  • Backdrop Filter: To adjust the blurring of the widget background, enter a value. The unit is pixels. This option takes effect only when you enable Experimental Web Platform features for your Chrome browser.
    Note To enable Experimental Web Platform features, follow these steps:
    1. Open the Chrome browser and enter chrome://flags/#enable-experimental-web-platform-features.
    2. Click the drop-down arrow next to Experimental Web Platform features and select Enabled.
    3. Restart the browser.

Data

You do not need to configure data for this widget.
Note This widget can be extended to be a line.

Interaction

This widget is not connected to any events yet.