✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
📊 Dash 2.0 is Arriving. Register here.

How to change the color of the whole background with no area left?

The following code taken from here produces a figure with a black background:

import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

colors = {
    'background': '#111111',
    'text': '#7FDBFF'

app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
        children='Hello Dash',
            'textAlign': 'center',
            'color': colors['text']

    html.Div(children='Dash: A web application framework for Python.', style={
        'textAlign': 'center',
        'color': colors['text']

            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            'layout': {
                'plot_bgcolor': colors['background'],
                'paper_bgcolor': colors['background'],
                'font': {
                    'color': colors['text']

if __name__ == '__main__':

But, as you can see in the screenshot below, it left part of the background area white:

How do I get it to make the entire background black?

I changed the style of the main div to the following:

style={'backgroundColor': colors['background'], 'color': colors['text'], 'height':'100vh', 'width':'100%', 'height':'100%', 'top':'0px', 'left':'0px'}

but it did not change anything.

There is probably padding around the div. Have you inspected the element using browser development tools (pressing F12 in most browsers)?

Have you tried a separate css file.
The following is the only thing you would need to make the whole background the color you want.

body {
background-color: ;


That is because the margins of the page are not automatically 0, in order to change that make a new directory in your root folder named ‘assets’ and in that make a new css file named ‘reset.css’. In that file you need to have the following line of code,

body {
margin: 0;

Note that the name of the directory needs to be as specified in order for this to work without any new line of code in your main file.

1 Like