# Background color change

**URL:** https://community.glideapps.com/t/background-color-change/26764
**Category:** Ask for Help
**Created:** [May 13, 2021, 4:42pm UTC](https://community.glideapps.com/t/background-color-change/26764 "2021-05-13T16:42:45Z")
**Posts on this page:** 17
**Page:** 1

<div class="post-metadata">

### Author: ![Rahil\_Salecha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rahil_salecha/32/18512_2.png) [@Rahil\_Salecha](https://community.glideapps.com/u/Rahil_Salecha)
#### Post date: [May 13, 2021, 4:42pm UTC](https://community.glideapps.com/t/background-color-change/26764/1 "2021-05-13T16:42:45Z")

</div>

I wanted to know that is there any way in which we can set bg color which isn’t themed

---

<div class="post-metadata">

### Author: ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [May 13, 2021, 4:58pm UTC](https://community.glideapps.com/t/background-color-change/26764/2 "2021-05-13T16:58:25Z")

</div>

How do you want the background to be set?  
Uploaded photo?  
Solid Color?  
Do you want to set the background or your users?  
Are you looking to change the full screen or just a component?

---

<div class="post-metadata">

### Author: ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)
#### Post date: [May 13, 2021, 5:46pm UTC](https://community.glideapps.com/t/background-color-change/26764/3 "2021-05-13T17:46:01Z")

</div>

Check out this great app, under css tab credit to @Uzo 👍

> **[Code BOOK](https://code-book.glideapp.io/)**
>
> share cool codes, scripts and links

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/9/59aedb390d984b462d49dc93edc4945e0cf908bc.jpeg)

The original discussion is here

> [@MagicPattern CSS Backgrounds!](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352):
>
> Hey guys! I recently discovered a tool called magicpattern. I love their css background builder. It’s free, and there’s NO SIGNUP REQUIRED!! I really like their amazing - but simple and minimalistic - backgrounds, and I look forward to incorporating this into my Glide app!

---

<div class="post-metadata">

### Author: ![Rahil\_Salecha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rahil_salecha/32/18512_2.png) [@Rahil\_Salecha](https://community.glideapps.com/u/Rahil_Salecha)
#### Post date: [May 14, 2021, 4:18am UTC](https://community.glideapps.com/t/background-color-change/26764/4 "2021-05-14T04:18:23Z")

</div>

solid color which is not white or black

---

<div class="post-metadata">

### Author: ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)
#### Post date: [May 14, 2021, 5:33am UTC](https://community.glideapps.com/t/background-color-change/26764/5 "2021-05-14T05:33:41Z")

</div>

@Rahil_Salecha It’s on my post above.

Link to specific details of how others have found a way to change background colour ⬇

> **[Code BOOK](https://code-book.glideapp.io/dl/ewAiAHQAIgA6ADIALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AYwBvAGQAZQBzACIALAAiAHIAIgA6ACIAWQBKADgAdQBSAGoAWAB6AFMAagA2AEIANgBvAGUAOQBWAFIAQwBZAC4AUQAiACwAIgBuACIAOgAiAEMAUwBTACAAYwBvAGQAZQAiAH0A)**
>
> share cool codes, scripts and links

Note: Injecting custom CSS/HTML is not officially supported by glide, so use at your own discretion.

---

<div class="post-metadata">

### Author: ![Rahil\_Salecha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rahil_salecha/32/18512_2.png) [@Rahil\_Salecha](https://community.glideapps.com/u/Rahil_Salecha)
#### Post date: [May 14, 2021, 6:31am UTC](https://community.glideapps.com/t/background-color-change/26764/6 "2021-05-14T06:31:13Z")

</div>

**_I am not able to understand this_**

---

<div class="post-metadata">

### Author: ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)
#### Post date: [May 14, 2021, 6:59am UTC](https://community.glideapps.com/t/background-color-change/26764/7 "2021-05-14T06:59:34Z")

</div>

Ohh 😮 what don’t you understand?

You can’t change the background colour just by clicking something in glide. You have to do it with code.

The link I sent you shows you an example of what others have done to change the background colour using ‘code’.

Is it that you don’t know how to add the code?

Please explain and we will try and help you.

---

<div class="post-metadata">

### Author: ![Rahil\_Salecha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rahil_salecha/32/18512_2.png) [@Rahil\_Salecha](https://community.glideapps.com/u/Rahil_Salecha)
#### Post date: [May 14, 2021, 7:15am UTC](https://community.glideapps.com/t/background-color-change/26764/8 "2021-05-14T07:15:30Z")

</div>

Can we change bg color in glide using code?

---

<div class="post-metadata">

### Author: ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)
#### Post date: [May 14, 2021, 7:46am UTC](https://community.glideapps.com/t/background-color-change/26764/9 "2021-05-14T07:46:33Z")

</div>

Yes…… and to tell you how, you have to look in the Code Book. Unless you expect a magic wand 😉 ✨

---

<div class="post-metadata">

### Author: ![Rahil\_Salecha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rahil_salecha/32/18512_2.png) [@Rahil\_Salecha](https://community.glideapps.com/u/Rahil_Salecha)
#### Post date: [May 14, 2021, 8:19am UTC](https://community.glideapps.com/t/background-color-change/26764/10 "2021-05-14T08:19:38Z")

</div>

how to use it

---

<div class="post-metadata">

### Author: ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)
#### Post date: [May 14, 2021, 9:00am UTC](https://community.glideapps.com/t/background-color-change/26764/11 "2021-05-14T09:00:58Z")

</div>

To put CSS into a glide screen you need to add a Rich Text component to the screen or tab.  
In that component, you paste in the CSS code.

For instance, if I put this into a Rich Text component, the CSS will remove the top bar and the tabs at the bottom of the screen:

```auto
<pre><span><style>
[id="tabBar"]{
display: none;
}
[data-test="glide-app-bar"] :nth-child(1) {
    display: none;

}
#app-root div[opacity='1'] {
  color: transparent; 
}

```

---

<div class="post-metadata">

### Author: ![Rahil\_Salecha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rahil_salecha/32/18512_2.png) [@Rahil\_Salecha](https://community.glideapps.com/u/Rahil_Salecha)
#### Post date: [May 14, 2021, 10:11am UTC](https://community.glideapps.com/t/background-color-change/26764/12 "2021-05-14T10:11:11Z")

</div>

thanks a lot

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [May 15, 2021, 5:00am UTC](https://community.glideapps.com/t/background-color-change/26764/13 "2021-05-15T05:00:51Z")

</div>

here you can see in action how to play with CSS:

**[test CSS](https://sa-test.glideapp.io/dl/ewAiAHQAIgA6ADcALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AbgBhAHQAaQB2AGUALQB0AGEAYgBsAGUALQBCAHEAVwBHAHEAMABqAHoAUQBTAFUAVQBwAFUAawBnAGgAUgBSAEQAIgAsACIAcgAiADoAIgBuADMAYwB3AHkAMAB1AC4AUgBuAHEARQBHAHMASgBJAGEAcgBYAGsAMABBACIALAAiAG4AIgA6ACIAVABPAFAAIABCAEEATgBOAEUAUgAgAEMAUwBTACAAKwAgAGMAbwBsAG8AcgBzACIAfQA%3D)**

---

<div class="post-metadata">

### Author: ![RossBoone](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rossboone/32/72496_2.png) [@RossBoone](https://community.glideapps.com/u/RossBoone)
#### Post date: [September 2, 2021, 5:21am UTC](https://community.glideapps.com/t/background-color-change/26764/14 "2021-09-02T05:21:10Z")

</div>

this is amazing! Are we able to copy your code? I see it is a business and would consider donating if so. I’d really like to place a picture in the background of my app. Do you have code for that? thanks!

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [September 2, 2021, 5:23am UTC](https://community.glideapps.com/t/background-color-change/26764/15 "2021-09-02T05:23:37Z")

</div>

yes, all codes have a button to copy code, or you can get the tab “TEST CSS” and play with it and see changes in real life… then just right-click copy and paste to your App…  
donations are voluntary 😉

> **[Code BOOK](https://code-book.glideapp.io/)**
>
> share cool codes, scripts and links

---

<div class="post-metadata">

### Author: ![Glide\_rentals](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/glide_rentals/32/66873_2.png) [@Glide\_rentals](https://community.glideapps.com/u/Glide_rentals)
#### Post date: [January 21, 2024, 4:56am UTC](https://community.glideapps.com/t/background-color-change/26764/16 "2024-01-21T04:56:50Z")

</div>

Not working for me am I supposed to paste it in rich text component

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [January 21, 2024, 5:13am UTC](https://community.glideapps.com/t/background-color-change/26764/17 "2024-01-21T05:13:48Z")

</div>

> [@Change overall app background color](https://community.glideapps.com/t/change-overall-app-background-color/69805/2):
>
> You can change the apps accent color in the app settings. If you want background colors elsewhere, you can add a container component, put all of your components in that container, and then change the background for the container. If you want a color as the background for that container, there are some default options, but you can also add an Image From Color column in your table and use that as the background for the container.