Home / Managing Global Styles

Background

Unknown Author

Last updated on Aug 30, 2024

Background is a global style approach that allows you to define the background styling of a widget according to your preferences.

It comprises:

  • + icon: Allows you to add background images and colors;
  • Visibility: Allows you to activate/deactivate the visibility of the existing background.
  • Bin: Allows you to delete the background color.
  • Color Picker: Allows you to choose the color for your widget background and style the details.

When clicking on the color picker, a pop-up window opens with the following options:

Color Picker

It comprises the following color types:

  • Solid: Allows you to select a widget background color. Click the corresponding color on the color palette, enter the color's hex code, and adjust the RGBA and HSLA values.
  • Gradient: Allows you to select gradient color of the following types:
    • Linear: A color type that creates a smooth transition of colors in a linear direction.
    • Radial: A color type where the colors radiate outward from a central point, creating a circular or elliptical gradient effect.

Note: The maximum number of color-stop points is five.

  • Image: Allows you to add a background image to your widget. You can modify the uploaded image according to the following options:
    • Cover: Enables you to set the image for the whole widget’s background. You can move the image horizontally (Left) and vertically (Top) and select its position (Scroll, Fixed and Local).
    • Contain: Enables you to amplify the image, i.e. the background image is scaled proportionally to fit within the container while preserving its aspect ratio and is visible without exceeding the container boundaries. You can move the image horizontally (Left) and vertically (Top) and select its position (Scroll, Fixed and Local).
    • Custom: Allows you to modify the width and height size of the background picture.

Variables

Allows you to choose a color from your color variables (see Design System > Variables).

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.