1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
# Background
The `background` style sets the background color of a widget.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
background: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
--8<-- "docs/snippets/syntax_block_end.md"
The `background` style requires a [`<color>`](../css_types/color.md) optionally followed by [`<percentage>`](../css_types/percentage.md) to specify the color's opacity (clamped between `0%` and `100%`).
## Examples
### Basic usage
This example creates three widgets and applies a different background to each.
=== "Output"
```{.textual path="docs/examples/styles/background.py"}
```
=== "background.py"
```python
--8<-- "docs/examples/styles/background.py"
```
=== "background.tcss"
```css hl_lines="9 13 17"
--8<-- "docs/examples/styles/background.tcss"
```
### Different opacity settings
The next example creates ten widgets laid out side by side to show the effect of setting different percentages for the background color's opacity.
=== "Output"
```{.textual path="docs/examples/styles/background_transparency.py"}
```
=== "background_transparency.py"
```python
--8<-- "docs/examples/styles/background_transparency.py"
```
=== "background_transparency.tcss"
```css hl_lines="2 6 10 14 18 22 26 30 34 38"
--8<-- "docs/examples/styles/background_transparency.tcss"
```
## CSS
```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.
```python
# 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)
```
## See also
- [`background-tint`](./background_tint.md) to blend a color with the background.
- [`color`](./color.md) to set the color of text in a widget.
|
