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

Dash Python
1

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=[
    html.H1(
        children='Hello Dash',
        style={
            'textAlign': 'center',
            'color': colors['text']
        }
    ),

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

    dcc.Graph(
        id='example-graph-2',
        figure={
            '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__':
    app.run_server(debug=True)

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

image
image1920×1006 20.4 KB

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.

1 Like
2

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

3

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: ;
}

2 Likes
4

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
5

I have the same issue. Can anyone help on this ?

BUMP

6

I managed to fix it by adding the assets folder to my project. There create .css file for example main.css and add the following in there

body{

background-color: black;

}

Basically what HansPeter123 said