# How do i set the background color for my app?

**URL:** <https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677>\
**Category:** ionic-v1\
**Created:** [August 23, 2014, 8:43pm UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677 "2014-08-23T20:43:42Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![jlinoff](https://avatars.discourse-cdn.com/v4/letter/j/f1d935/32.png) [@jlinoff](https://forum.ionicframework.com/u/jlinoff)\
**Post date:** [August 23, 2014, 8:43pm UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/1 "2014-08-23T20:43:42Z")

</div>

Hi,

I want to set the background color for my app but using straight CSS doesn’t seem to work.

Here is what I have tried:

```
body {
    background-color: yellow !important;
}
.ion-content
{
    background-color: green;
}

```

I am sure that this is very simple but I can’t figure it out.

Can someone point me in the right direction?

Thanks,

---

<div class="post-metadata">

**Author:** ![jlinoff](https://avatars.discourse-cdn.com/v4/letter/j/f1d935/32.png) [@jlinoff](https://forum.ionicframework.com/u/jlinoff)\
**Post date:** [August 23, 2014, 8:53pm UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/2 "2014-08-23T20:53:46Z")

</div>

This post provided some great hints: [Setting background for entire app](http://forum.ionicframework.com/t/setting-background-for-entire-app/2763/2).

I now have the _content_ displaying the correct background color using this CSS:

```
.background, .background .pane, .background .item, .background .item-complex .item-content {
    background-color: yellow;
}

```

and inserting the background class in the HTML:

```
 <body ng-app="starter" animation="slide-left-right-ios7">
   <!-- 
    The nav bar that will be updated as we navigate between views. 
    -->
    <ion-nav-bar class="bar-stable nav-title-slide-ios7 background">
      <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
        Back
      </ion-nav-back-button>
    </ion-nav-bar>
    <!-- 
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view class="background"></ion-nav-view>
  </body>

```

What do I need to do to get the header and footer to also display the background color?

---

<div class="post-metadata">

**Author:** ![jlinoff](https://avatars.discourse-cdn.com/v4/letter/j/f1d935/32.png) [@jlinoff](https://forum.ionicframework.com/u/jlinoff)\
**Post date:** [August 23, 2014, 11:38pm UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/3 "2014-08-23T23:38:13Z")

</div>

Here is what I did to get the footer working:

```
/* footer */
a.tab-item, i.icon.icon, span.tab-title  {
    background-color: #566196;
    color: #ffffff;
}

```

Presumably this only works for the tab view.

I can set the header title background but I have not yet been able to set the full header background. There are two vertical stripes on either side that do not have the correct background.

---

<div class="post-metadata">

**Author:** ![jlinoff](https://avatars.discourse-cdn.com/v4/letter/j/f1d935/32.png) [@jlinoff](https://forum.ionicframework.com/u/jlinoff)\
**Post date:** [August 24, 2014, 12:23am UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/4 "2014-08-24T00:23:52Z")

</div>

I finally got the header working. Here is the CSS:

```
/* header */
.bar.bar-stable {
    background-color: #7379a3;
    color: #f4f4f4;
}
.bar.bar-stable .title {
    background-color: #7379a3;
    color: #f4f4f4;
}

```

I figured it out by poking around in the web dev element inspector.

Is there a simpler way?

---

<div class="post-metadata">

**Author:** ![siddhartha](https://avatars.discourse-cdn.com/v4/letter/s/bc79bd/32.png) [@siddhartha](https://forum.ionicframework.com/u/siddhartha)\
**Post date:** [August 24, 2014, 4:51am UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/5 "2014-08-24T04:51:02Z")

</div>

> [@jlinoff](#):
>
> ave the content displaying the correct background color using this CSS:

Yeah there is a simple way. Use Sass.

---

<div class="post-metadata">

**Author:** ![jlinoff](https://avatars.discourse-cdn.com/v4/letter/j/f1d935/32.png) [@jlinoff](https://forum.ionicframework.com/u/jlinoff)\
**Post date:** [August 25, 2014, 5:13pm UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/6 "2014-08-25T17:13:35Z")

</div>

Thank you. How do I use Sass to do that? Can you point me to some documentation?

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [August 25, 2014, 5:25pm UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/7 "2014-08-25T17:25:47Z")

</div>

_shameless sefl-plug_

[http://learn.ionicframework.com/formulas/working-with-sass/](http://learn.ionicframework.com/formulas/working-with-sass/)

---

<div class="post-metadata">

**Author:** ![sunnyday](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@sunnyday](https://forum.ionicframework.com/u/sunnyday)\
**Post date:** [October 1, 2014, 6:36am UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/8 "2014-10-01T06:36:08Z")

</div>

So which variable, if any, in ionic.app.scss controls the background color, so we can change it to suit the app style? or is that variable to be found in a different file? Thanks.

---

<div class="post-metadata">

**Author:** ![iwantwin](https://avatars.discourse-cdn.com/v4/letter/i/94ad74/32.png) [@iwantwin](https://forum.ionicframework.com/u/iwantwin)\
**Post date:** [October 1, 2014, 8:43am UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/9 "2014-10-01T08:43:17Z")

</div>

I believe that the default ion-content background is set in the $light variable I’m not sure though! give it a try 😉

---

<div class="post-metadata">

**Author:** ![sunnyday](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@sunnyday](https://forum.ionicframework.com/u/sunnyday)\
**Post date:** [October 1, 2014, 6:46pm UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/10 "2014-10-01T18:46:39Z")

</div>

I tried $light, but that does not change the app background. @mhartington, can you please help with your input on this? Where can we find the variable that can be altered to change ionic app background color? Thanks.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [October 1, 2014, 7:07pm UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/11 "2014-10-01T19:07:52Z")

</div>

Actually the background is hard coded. But it can easily been overwritten to use a variable.

> **[Background colors](https://codepen.io/mhartington/pen/AEfcz)**
>
> Adding a background color to your ion-content...

---

<div class="post-metadata">

**Author:** ![sunnyday](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@sunnyday](https://forum.ionicframework.com/u/sunnyday)\
**Post date:** [October 1, 2014, 7:17pm UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/12 "2014-10-01T19:17:07Z")

</div>

@mhartington, thanks for your quick reply. While I was poking around in the \_variables.scss file, I just came across this variable `$base-background-color` and overriding it in the ionic.app.scss file seemed to do the trick, with the advantage of no additional class required.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [October 1, 2014, 7:29pm UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/13 "2014-10-01T19:29:03Z")

</div>

Nice! Must have missed that one.

The idea behind my approach is that you can set styles for your ion-contents similar to how you would for buttons and headers. This way you could change them on different views.

---

<div class="post-metadata">

**Author:** ![adaptivedev](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@adaptivedev](https://forum.ionicframework.com/u/adaptivedev)\
**Post date:** [September 24, 2015, 10:37am UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/14 "2015-09-24T10:37:07Z")

</div>

Note to others, you can use $base-color for text font

---

<div class="post-metadata">

**Author:** ![Sidd27](https://avatars.discourse-cdn.com/v4/letter/s/bc79bd/32.png) [@Sidd27](https://forum.ionicframework.com/u/Sidd27)\
**Post date:** [November 17, 2015, 10:41am UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/15 "2015-11-17T10:41:44Z")

</div>

> [@sunnyday](#):
>
> $base-background-color

HI @adaptivedev,

But form background become very bad  
 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/f/c/fce31f8ee7ce8b4929c7a6cc4460ff34de137bd2.png)

---

<div class="post-metadata">

**Author:** ![cfriedel](https://avatars.discourse-cdn.com/v4/letter/c/e495f1/32.png) [@cfriedel](https://forum.ionicframework.com/u/cfriedel)\
**Post date:** [January 31, 2016, 7:20pm UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/16 "2016-01-31T19:20:53Z")

</div>

Know this question was awhile ago, but for anyone else seeing this form backgrounds can also be set using sass

Background sass variables declared in **lib/ionic/scss/\_variables.scss**  
`$input-bg: $light !default; $input-bg-disabled: $stable !default;`

So in your own style.scss, you could either assign those variables directly to your new background color. More correctly, if you’ve changed your background color, you might want to redefine $light and $stable and such since relative to your new darker background these variables’ color probably doesn’t make as much sense any more.

Cheers!

---

<div class="post-metadata">

**Author:** ![Sidd27](https://avatars.discourse-cdn.com/v4/letter/s/bc79bd/32.png) [@Sidd27](https://forum.ionicframework.com/u/Sidd27)\
**Post date:** [February 9, 2016, 9:56am UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/17 "2016-02-09T09:56:18Z")

</div>

Thanks…

---

<div class="post-metadata">

**Author:** ![philipbrack](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@philipbrack](https://forum.ionicframework.com/u/philipbrack)\
**Post date:** [September 4, 2017, 7:57pm UTC](https://forum.ionicframework.com/t/how-do-i-set-the-background-color-for-my-app/8677/18 "2017-09-04T19:57:32Z")

</div>

For ionic2 $background-color