2.2 KiB
Background
The background rule sets the background color of a widget with an optional transparency level.
Syntax
background: <COLOR> [<PERCENTAGE>];
The legal values for <COLOR> are dependant on the [class Color][textual.color.Color] and include:
- a recognised named color (e.g.,
red); - a hexadecimal number representing the RGB values of the color (e.g.,
#F35573); - a color description in the HSL system (e.g.,
hsl(290,70%,80%))
For more details about the exact formats accepted, see [the class method Color.parse][textual.color.Color.parse].
Examples
This example creates three widgets and applies a different background to each.
=== "background.py"
```python
--8<-- "docs/examples/styles/background.py"
```
=== "background.css"
```sass
--8<-- "docs/examples/styles/background.css"
```
=== "Output"
```{.textual path="docs/examples/styles/background.py"}
```
The next example creates ten widgets layed out side by side to show the effect of setting different percentages for the transparency of the background color.
=== "background_transparency.py"
```python
--8<-- "docs/examples/styles/background_transparency.py"
```
=== "background_transparency.css"
```sass
--8<-- "docs/examples/styles/background_transparency.css"
```
=== "Output"
```{.textual path="docs/examples/styles/background_transparency.py"}
```
CSS
/* Blue background */
background: blue;
/* 20% red background */
background: red 20%;
/* RGB color */
background: rgb(100,120,200);
/* HSL color */
background: hsl(290,70%,80%);
Python
You can use the same syntax as CSS, or explicitly set a Color object for finer-grained control.
# Set blue background
widget.styles.background = "blue"
# Set through HSL model
widget.styles.background = "hsl(351,32%,89%)"
from textual.color import Color
# Set with a color object by parsing a string
widget.styles.background = Color.parse("pink")
widget.styles.background = Color.parse("#FF00FF")
# Set with a color object instantiated directly
widget.styles.background = Color(120, 60, 100)