Skip to content

Background

The background rule sets the background color of the widget.

Syntax

background: <COLOR> [<PERCENTAGE>];

Example

This example creates three widgets and applies a different background to each.

from textual.app import App
from textual.widgets import Static


class BackgroundApp(App):
    def compose(self):
        yield Static("Widget 1", id="static1")
        yield Static("Widget 2", id="static2")
        yield Static("Widget 3", id="static3")


app = BackgroundApp(css_path="background.css")
Static {
    height: 1fr;
    content-align: center middle;
    color: white;
}    
#static1 {
    background: red;
}
#static2 {
    background: rgb(0, 255, 0);
}
#static3 {
    background: hsl(240, 100%, 50%);
}

BackgroundApp Widget 1 Widget 2 Widget 3

CSS

/* Blue background */
background: blue;

/* 20% red background */
background: red 20%;

/* RGB color */
background: rgb(100,120,200);

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"

from textual.color import Color
# Set with a color object
widget.styles.background = Color.parse("pink")
widget.styles.background = Color(120, 60, 100)