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.

Possible Values

Example

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

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

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"))