# Setting background for entire app

**URL:** <https://forum.ionicframework.com/t/setting-background-for-entire-app/2763>\
**Category:** ionic-v1\
**Created:** [April 8, 2014, 10:35am UTC](https://forum.ionicframework.com/t/setting-background-for-entire-app/2763 "2014-04-08T10:35:03Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![NairoQuintana](https://avatars.discourse-cdn.com/v4/letter/n/b5ac83/32.png) [@NairoQuintana](https://forum.ionicframework.com/u/NairoQuintana)\
**Post date:** [April 8, 2014, 10:35am UTC](https://forum.ionicframework.com/t/setting-background-for-entire-app/2763/1 "2014-04-08T10:35:03Z")

</div>

Is it possible to set the background color for the entire app to for example “stable” ?  
I tried editing the $light variable with SASS but this doesn’t change borders and menu’s for example.  
I noticed that ionic has stable-bg and stable-border but I can’t figure out how to make them work yet.

---

<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:** [April 8, 2014, 12:47pm UTC](https://forum.ionicframework.com/t/setting-background-for-entire-app/2763/2 "2014-04-08T12:47:00Z")

</div>

The variables, stable bg, and stable border and for setting the background colors and borders for bar elements; headers, footers, tab bar.

There isn’t a built in way to set a background colors and such to the entire app. Most of that would be custom css that you would write to set a brand for your own app.

---

<div class="post-metadata">

**Author:** ![NairoQuintana](https://avatars.discourse-cdn.com/v4/letter/n/b5ac83/32.png) [@NairoQuintana](https://forum.ionicframework.com/u/NairoQuintana)\
**Post date:** [April 8, 2014, 1:07pm UTC](https://forum.ionicframework.com/t/setting-background-for-entire-app/2763/3 "2014-04-08T13:07:29Z")

</div>

Ok, too bad, I’ll do that. Thanks!

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [April 8, 2014, 9:04pm UTC](https://forum.ionicframework.com/t/setting-background-for-entire-app/2763/4 "2014-04-08T21:04:56Z")

</div>

I also tried to do this globally. It wasn’t a good idea. In some view, I actually did just want the default Ionic looking and feel. Others, I wanted customized.

So, I just created a class for those views that needs branding. Like this:

```auto
<ion-view title="navTitle" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true" class="bubble-background">

```

FYI : Still using VERY old Ionic code.

---

<div class="post-metadata">

**Author:** ![NairoQuintana](https://avatars.discourse-cdn.com/v4/letter/n/b5ac83/32.png) [@NairoQuintana](https://forum.ionicframework.com/u/NairoQuintana)\
**Post date:** [April 9, 2014, 9:00am UTC](https://forum.ionicframework.com/t/setting-background-for-entire-app/2763/5 "2014-04-09T09:00:03Z")

</div>

Thanks, I used this code:

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

<ion-nav-view class="background"></ion-nav-view>

```

---

<div class="post-metadata">

**Author:** ![cScarlson](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/cscarlson/32/87808_2.png) [@cScarlson](https://forum.ionicframework.com/u/cScarlson)\
**Post date:** [September 15, 2015, 4:13am UTC](https://forum.ionicframework.com/t/setting-background-for-entire-app/2763/6 "2015-09-15T04:13:13Z")

</div>

_I know I’m a little tardy_…  
I had attempted to write an _new_ class of `.tabs-accent { background-color: $theme-accent !important; }`, but got nothing. I wrote new classes for `[x]-bg`, `[x]`, and `item-[x]` and these styles took. However, I inspected within my browser and lo and behold the `tabs-accent` class never got passed down from the `<ion-tabs>` component to its rendered child `div.tabs` element. So, like a [nincompoop](http://dictionary.reference.com/browse/nincompoop?r=75&src=ref&ch=dic), I’m resorting to changing the default values for my color classes inside of `ionic.app.scss`.

Hope this saves some poor [potential nincompoop] soul a lot of time.