Backgroundcolor Dash

Dash Python
1

How to set backgroundcolor of the Website in Dash?

2

In Dash you do this using CSS, the same as you would for HTML, by applying the appropriate style to the desired element, which in this case is going to be the parent Component of your layout.

app.layout = html.Div(html.H1('Heading', style={'backgroundColor':'blue'})

Note that in Dash, you specify style names with camelCase rather than using hyphens.

1 Like
3

Is there any way to set it for the whole page? I get this weird white border around everything when I put everything in a Div and set it’s background to black.

1 Like
4

That is because by default, the browser use a style sheet to apply to every page. Include this somewhere in your css.

body { margin: 0; }

To include in dash, put that in a css file in folder named static at the root of you project.

import dash
app = dash.Dash('root-dir-name')  # the name of the folder containing your code and static folder.
app.css.append_css({'external_url': '/static/reset.css'})
app.server.static_folder = 'static'  # if you run app.py from 'root-dir-name' you don't need to specify.
# ... rest of code
2 Likes
5

Can this be done in-line, within the code for the app? I’d rather not create a new css file just to overwrite a single css tag like changing <body> properties.

6

Including a css reset file is the easiest way. Just put it in the assets folder in your project directory. It will be included on the index. https://dash.plot.ly/external-resources