# Background image with ui\_text overlay

**URL:** https://discourse.nodered.org/t/background-image-with-ui-text-overlay/25646
**Category:** Dashboard
**Created:** [27 April 2020 20:50 UTC](https://discourse.nodered.org/t/background-image-with-ui-text-overlay/25646 "2020-04-27T20:50:30Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![brammh](https://avatars.discourse-cdn.com/v4/letter/b/8edcca/32.png) [@brammh](https://discourse.nodered.org/u/brammh)
#### Post date: [27 April 2020 20:50 UTC](https://discourse.nodered.org/t/background-image-with-ui-text-overlay/25646/1 "2020-04-27T20:50:30Z")

</div>

Hi all,  
Is there a simple way to have a background image (on a group, a tab, or just in a ui\_template node) on which I overlay a few ui\_text nodes?  
Thought this would be easy with node-red-dashboard, but after some searching I'm getting scared that I need to create my own widget, or move to a different front-end stack.  
I have a simple 2D image of my water heating system, and want to display the temperature values 'on-top' of it. Guess that is a common use case.  
thanks a ton!  
bram

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [27 April 2020 21:03 UTC](https://discourse.nodered.org/t/background-image-with-ui-text-overlay/25646/2 "2020-04-27T21:03:35Z")

</div>

It is doable (I've seen screenshots of dashboard with background images on tabs and groups)

Did you search this forum for **background image**?

I stopped counting after scrolling past 50 potential answers.

The answer is definitely there.

If you give it a go & get stuck, I'm certain someone will help out.

---

<div class="post-metadata">

### Author: ![brammh](https://avatars.discourse-cdn.com/v4/letter/b/8edcca/32.png) [@brammh](https://discourse.nodered.org/u/brammh)
#### Post date: [27 April 2020 22:03 UTC](https://discourse.nodered.org/t/background-image-with-ui-text-overlay/25646/3 "2020-04-27T22:03:13Z")

</div>

You are right, it's there.  
I'm sure this is not the right way to do it. but works for me:

```auto
<style>
    #Groupname_Tagname {
        background-image: url("myimage.jpg");
    }
    body.nr-dashboard-theme md-content md-card {
        background: transparent;
        color: white !important
    }
</style>

```

cheers, bram

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [11 May 2020 22:03 UTC](https://discourse.nodered.org/t/background-image-with-ui-text-overlay/25646/4 "2020-05-11T22:03:19Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.