A static background image in a template node

Dashboard
1

I want a floorplan image and display the temperature values in each room as simple text. Normal way would be using a SVG image but my main display is an old iPad which does not render dynamic content embedded in SVG code.
My work around would be a simple static image where on top I display some text elements.
My template so far:

<style>
    body {
        background-image: url('/images/floorplan.jpg');
        background-size: auto;
        background-position: center;
        background-repeat: no-repeat;
        align-items: center;
    }

    .container {
        position: relative;
    }

    .text1 {
        position: absolute;
        top: 50px;
        left: 100px;
        font-size: 24px;
        color: white;
    }

    .text2 {
        position: absolute;
        top: 150px;
        left: 200px;
        font-size: 18px;
        color: white;
    }

    .text3 {
        position: absolute;
        top: 300px;
        left: 50px;
        font-size: 20px;
        color: white;
    }
</style>


<div class="container">
    <div class="text1">This is the first text element.</div>
    <div class="text2">This is the second text element.</div>
    <div class="text3">This is the third text element.</div>
</div>

Access to the local image file is ok but it is hidden behind the (standard) dark background with the white text on top.

What style attribute lets the background image "shine thru"?

2

if you're are assigning a css prop to an element that already has that prop, you cant try with:

background-image: url('/images/floorplan.jpg') !important;

3

Nope, has no effect.
I find many threads with similar background image problems. However I did not spot a complete example of a working tab with a specific background only for that one tab (or group) ., only sniplets??

4

If it is dashboard 1 then you can't see the body element. It is covered by some content wrappers so you'll need to find them and maybe add the background to topmost element.

I don't have dashboard 1 installed anymore can't point out what it is exactly

5

If the name of your tab is "mytab" then you can set the background image for that tab only, assuming that you have the right value in settings.js for http_static

#Tab_mytab {
   background-image: url('/images/floorplan.jpg');
}

And if a group on that tab is called "mygroup" you can make the group header and content transparent

#mytab_mygroup, #mytab_mygroup .nr-dashboard-template {
        background: transparent;
}

I thought it might be simpler using custom classes but couldn't make that work.

6

I'm not familiar with dashboard but presumably it's responsive so placing absolute elements with fixed offsets won't play nicely when background resizes.