# Change the background color of a group

**URL:** https://discourse.nodered.org/t/change-the-background-color-of-a-group/4075
**Category:** Dashboard
**Created:** [18 October 2018 07:50 UTC](https://discourse.nodered.org/t/change-the-background-color-of-a-group/4075 "2018-10-18T07:50:05Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)
#### Post date: [18 October 2018 07:50 UTC](https://discourse.nodered.org/t/change-the-background-color-of-a-group/4075/1 "2018-10-18T07:50:05Z")

</div>

Is there a way to make the background invisible for one group?

I am able to make all group backgrounds invisible in a tab, but not for one.  
In ui\_template I have this code:

.nr-dashboard-theme ui-card-panel { background-color: rgba(255,255,255,0); } body.nr-dashboard-theme md-content md-card { background-color: rgba(255,255,255,0); }

this is the result:

 ![test1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f35aee5bbbc521ef3d2c78d52bcc85d06bca47fa.png)

Now: I want only the background of group "Buttons" invisible.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [18 October 2018 08:03 UTC](https://discourse.nodered.org/t/change-the-background-color-of-a-group/4075/2 "2018-10-18T08:03:51Z")

</div>

Each group will have an id - so you need to target that more specifically with your CSS.

---

<div class="post-metadata">

### Author: ![cobra85ec](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cobra85ec/32/3358_2.png) [@cobra85ec](https://discourse.nodered.org/u/cobra85ec)
#### Post date: [26 October 2018 19:30 UTC](https://discourse.nodered.org/t/change-the-background-color-of-a-group/4075/3 "2018-10-26T19:30:55Z")

</div>

I'm trying to do the same thing. Can you plz show a eg code. Thank u

---

<div class="post-metadata">

### Author: ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)
#### Post date: [27 October 2018 00:18 UTC](https://discourse.nodered.org/t/change-the-background-color-of-a-group/4075/4 "2018-10-27T00:18:28Z")

</div>

> [@cobra85ec](#):
>
> Can you plz show a eg code

I'm no expert, but I did an inspect to identify the specific card as in this screenshot (blue highlight on the right and top left)

 ![snip_20181026190249](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4424333ea094f795fe72dcbab58f9ef27284937c.png)

Once you know the card name adjust your parameters as needed in your css as you did for the background. Hope this help.

![snip_20181026191122](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d8b348153263da842dfe521ca04ffcd2ec030783.png)

---

<div class="post-metadata">

### Author: ![cobra85ec](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cobra85ec/32/3358_2.png) [@cobra85ec](https://discourse.nodered.org/u/cobra85ec)
#### Post date: [27 October 2018 01:02 UTC](https://discourse.nodered.org/t/change-the-background-color-of-a-group/4075/5 "2018-10-27T01:02:36Z")

</div>

like this..?

#1home\_BEDROOM\_REMOTE { background-color: #00ff33; background-size:100% 100%; }

---

<div class="post-metadata">

### Author: ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)
#### Post date: [27 October 2018 02:00 UTC](https://discourse.nodered.org/t/change-the-background-color-of-a-group/4075/6 "2018-10-27T02:00:59Z")

</div>

> [@cobra85ec](#):
>
> like this..?

Not sure you need the background-size: 100% 100%. What results are you getting?

---

<div class="post-metadata">

### Author: ![cobra85ec](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cobra85ec/32/3358_2.png) [@cobra85ec](https://discourse.nodered.org/u/cobra85ec)
#### Post date: [27 October 2018 02:17 UTC](https://discourse.nodered.org/t/change-the-background-color-of-a-group/4075/7 "2018-10-27T02:17:22Z")

</div>

it dont work i used the ui template

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [27 October 2018 06:55 UTC](https://discourse.nodered.org/t/change-the-background-color-of-a-group/4075/8 "2018-10-27T06:55:54Z")

</div>

Did you add it to the head section ?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/dbb8be09f28a92daabb0ede4c502b39be66dd3e9.jpeg)

---

<div class="post-metadata">

### Author: ![cobra85ec](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cobra85ec/32/3358_2.png) [@cobra85ec](https://discourse.nodered.org/u/cobra85ec)
#### Post date: [27 October 2018 13:23 UTC](https://discourse.nodered.org/t/change-the-background-color-of-a-group/4075/9 "2018-10-27T13:23:32Z")

</div>

ok i got it thank you very much...

---

<div class="post-metadata">

### Author: ![RapinIot1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rapiniot1/32/7086_2.png) [@RapinIot1](https://discourse.nodered.org/u/RapinIot1)
#### Post date: [7 April 2019 21:18 UTC](https://discourse.nodered.org/t/change-the-background-color-of-a-group/4075/10 "2019-04-07T21:18:07Z")

</div>

do you have sample code for this