Background image with ui_text overlay

Dashboard
1

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

2

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.

3

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

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

cheers, bram

2 Likes
4

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