Background Color

The background-color property in CSS is used to set the background color of an HTML element. It supports various color values, such as:

• Named Colors: Predefined colors like red, blue, green, etc.

• Hexadecimal Values: Hex codes like #FF5733.

• RGB/RGBA: RGB values such as rgb(255, 87, 51) or RGBA with an alpha channel rgba(255, 87, 51, 0.5).

• HSL/HSLA: Hue, saturation, and lightness values like hsl(9, 100%, 60%) or HSLA with an alpha channel hsla(9, 100%, 60%, 0.5).

This property allows customization of element backgrounds, contributing to a visually appealing and coherent design in web applications.

This is a Conditional Value field. Such fields allow you to specify values directly OR use a Formula to specify a value. Conditional values are useful for specifying different values for changing situations, such as varying device types or screen sizes.

Possible Values

Value	Units	Description
"Unset"	N/A	Do not set a color (Default values from parent elements may be applied)
"Set"	N/A	Set and choose the color from color picker

Example

Here is a visual example demonstrating the Background Color property for a Block Container:

Property Editor

Widget placed on the page

1. When the Background Color for a Block Container is Unset, no background color is applied to the Widget.

Property Editor

Widget placed on the page

1. When the Background Color for a Block Container is set, background color is applied to the Widget. You can choose the color from Color Picker which appears on the left of the dropdown.

Conditional Values

What are conditional values?

The background color can also be configured using conditional values by expanding the formula editor.

For Example:

• Change the background color to blue if current username is "johndoe"

IF(GETCURRENTUSERNAME() = "johndoe", "blue"))

---

• Change the background color to red if status field is "Rejected", otherwise green

IF(ITEMVALUE("status") = "Rejected", "red", "green"))