Background

The background rule sets the background color of a widget.

Syntax

--8<-- "docs/snippets/syntax_block_start.md" background: <color> [<percentage>]; --8<-- "docs/snippets/syntax_block_end.md"

The style background needs a <color> followed by an optional <percentage> to specify the color transparency.

Values

<color>

--8<-- "docs/snippets/type_syntax/color.md"

<percentage>

--8<-- "docs/snippets/type_syntax/percentage.md" This is clamped between 0% and 100%.

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)

2.2 KiB Raw Blame History