# Help regarding dashboards background

**URL:** <https://community.plotly.com/t/help-regarding-dashboards-background/63543>\
**Category:** Dash Python\
**Created:** [April 29, 2022, 12:18am UTC](https://community.plotly.com/t/help-regarding-dashboards-background/63543 "2022-04-29T00:18:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Syraxx](https://avatars.discourse-cdn.com/v4/letter/s/c2a13f/32.png) [@Syraxx](https://community.plotly.com/u/Syraxx)\
**Post date:** [April 29, 2022, 12:18am UTC](https://community.plotly.com/t/help-regarding-dashboards-background/63543/1 "2022-04-29T00:18:08Z")

</div>

Hi guys, I am having issues with changing the background of the dashboard I have created.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/9/d9d1b2783bdc72939f2d2ba209141cb32b512a6a.png)  
As you can see in the image above, the background only spreads across 70% of the screen, where as i want it at 100%.  
Heres my code

```auto
external_stylesheets = [
    'https://codepen.io/themustafaomar/pen/jLMPKm.css'] # ['https://codepen.io/chriddyp/pen/dZVMbK']
app = dash.Dash( __name__ , external_stylesheets=[
    dbc.themes.BOOTSTRAP]) # external_stylesheets)#external_stylesheets)#[dbc.themes.BOOTSTRAP])# external_stylesheets)
auth = dash_auth.BasicAuth(app, USERNAME_PASSWORD_PAIRS)
application = app.server
app.title = 'P.Dashboard'

colors = {
    'background': 'medium-green',
    'text': '#7FDBFF'
}

app.layout = html.Div([

    get_header(),

    get_navbar(),
    get_emptyrow(),
    #####################
    # Row 5 : Charts
    html.Div([ # External row
        html.Div([], className='col-2'), # Blank 1 column

        html.Div([ # External 10-column

            html.H2(children='Performance Dashboard',
                    style={'color': corporate_colors['white'], }),
            get_emptyrow(),
            html.Div([ # Internal row - RECAPS
                html.Div([], className='col-1'), # Empty column
            ],
                className='row',
                # style=recapdiv
            ),

            # Chart Column

            # Chart Column

            html.Div(
                [ # Internal row
                    #html.Div([], className='col-2'), # Blank 1 column,
                    # Chart Column

                    html.Div([dcc.Graph(id='AvailabilityDonut')],className='col-4'),
                    html.Div([dcc.Graph(id='ReliabilityDonut')],className='col-4'),
                    html.Div([dcc.Graph(id='ProductionPlot')], className='col-4')], className= 'row'),
                    get_emptyrow(),

                    html.Div([dcc.Graph(id='One')], className='col-4'),
                    html.Div([dcc.Graph(id='Two')], className='col-4'),
                    html.Div([dcc.Graph(id = 'TemperatureScale-2')],className='col-4')],className= 'row'),

            get_emptyrow(),
            html.Div([ # Internal Row#2
                #html.Div([], className='col-2'),
                html.Div([dcc.Graph(id='Three')], className='col-4'),
                # Chart Column
                html.Div([dcc.Graph(id='Four')], className='col-4'),
                html.Div([dcc.Graph(id = 'TemperatureScale-1')],className='col-4'),
                get_emptyrow(),

                html.Div(id='intermediate-value', style={'display': 'none'}),
                html.Div([
                html.H2('Asset Dashboard', id='title', style={'color': corporate_colors['white'],
                                                                 'margin-top': '20px'}),
                get_emptyrow(),

                html.Div(
                [ # Internal row
                    #html.Div([], className='col-2'), # Blank 1 column,
                    # Chart Column

                    html.Div([dcc.Graph(id='my-table',style={'margin-top': '100px'})],className='col-4'),
                    html.Div([dcc.Graph(id='bar-graph', style={'height': '325px'})],className='col-4')],className= 'row'),

                html.Div(
                [ # Internal row
                    #html.Div([], className='col-2'), # Blank 1 column,
                    # Chart Column

                    html.Div([dcc.Graph(id='my-table2',style={'margin-top': '100px'})],className='col-4'),
                    html.Div([dcc.Graph(id='bar-graph2', style={'height': '325px'})],className='col-4')],className= 'row'),

                dcc.Interval(id='interval1', interval=60 * 1000, n_intervals=0),
                html.Div(id='intermediate-value1', style={'display': 'none'})

])
            ], className='row')
        ],
            className='col-8',
            style=externalgraph_colstyling),
        html.Div([], className='col-1'),
    ],
        className='row',
        style=externalgraph_rowstyling
    )
```

---

<div class="post-metadata">

**Author:** ![jlfsjunior](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jlfsjunior/32/16061_2.png) [@jlfsjunior](https://community.plotly.com/u/jlfsjunior)\
**Post date:** [April 29, 2022, 7:55am UTC](https://community.plotly.com/t/help-regarding-dashboards-background/63543/2 "2022-04-29T07:55:28Z")

</div>

Hi,

Please take a look on [this old post](https://community.plotly.com/t/backgroundcolor-dash/8694/4).

In a nutshell, you have to whether a- reset the default css that is adding a border or b- define the background color for the entire `body`.

Hope this helps! 🙂