# Backgroundcolor Dash

**URL:** <https://community.plotly.com/t/backgroundcolor-dash/8694>\
**Category:** Dash Python\
**Created:** [March 1, 2018, 9:40am UTC](https://community.plotly.com/t/backgroundcolor-dash/8694 "2018-03-01T09:40:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gustiii](https://avatars.discourse-cdn.com/v4/letter/g/ee7513/32.png) [@Gustiii](https://community.plotly.com/u/Gustiii)\
**Post date:** [March 1, 2018, 9:40am UTC](https://community.plotly.com/t/backgroundcolor-dash/8694/1 "2018-03-01T09:40:17Z")

</div>

How to set backgroundcolor of the Website in Dash?

---

<div class="post-metadata">

**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\
**Post date:** [March 5, 2018, 2:04pm UTC](https://community.plotly.com/t/backgroundcolor-dash/8694/2 "2018-03-05T14:04:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![calgreen](https://avatars.discourse-cdn.com/v4/letter/c/ecb155/32.png) [@calgreen](https://community.plotly.com/u/calgreen)\
**Post date:** [July 3, 2018, 7:26pm UTC](https://community.plotly.com/t/backgroundcolor-dash/8694/3 "2018-07-03T19:26:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Philippe](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/philippe/32/3521_2.png) [@Philippe](https://community.plotly.com/u/Philippe)\
**Post date:** [July 3, 2018, 7:58pm UTC](https://community.plotly.com/t/backgroundcolor-dash/8694/4 "2018-07-03T19:58:20Z")

</div>

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

```auto
body { margin: 0; }

```

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

```python
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

```

---

<div class="post-metadata">

**Author:** ![datadrinkr](https://avatars.discourse-cdn.com/v4/letter/d/eb8c5e/32.png) [@datadrinkr](https://community.plotly.com/u/datadrinkr)\
**Post date:** [November 2, 2018, 4:54pm UTC](https://community.plotly.com/t/backgroundcolor-dash/8694/5 "2018-11-02T16:54:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Philippe](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/philippe/32/3521_2.png) [@Philippe](https://community.plotly.com/u/Philippe)\
**Post date:** [November 2, 2018, 5:10pm UTC](https://community.plotly.com/t/backgroundcolor-dash/8694/6 "2018-11-02T17:10:04Z")

</div>

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](https://dash.plot.ly/external-resources)