# A static background image in a template node

**URL:** <https://discourse.nodered.org/t/a-static-background-image-in-a-template-node/94882>\
**Category:** Dashboard\
**Created:** [24 January 2025 18:00 UTC](https://discourse.nodered.org/t/a-static-background-image-in-a-template-node/94882 "2025-01-24T18:00:29Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![haegar33](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haegar33/32/38805_2.png) [@haegar33](https://discourse.nodered.org/u/haegar33)\
**Post date:** [24 January 2025 18:00 UTC](https://discourse.nodered.org/t/a-static-background-image-in-a-template-node/94882/1 "2025-01-24T18:00:29Z")

</div>

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:

```auto
<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"?

---

<div class="post-metadata">

**Author:** ![ziga](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ziga/32/98138_2.png) [@ziga](https://discourse.nodered.org/u/ziga)\
**Post date:** [24 January 2025 18:21 UTC](https://discourse.nodered.org/t/a-static-background-image-in-a-template-node/94882/2 "2025-01-24T18:21:40Z")

</div>

> [@haegar33](#):
>
> `background-image: url('/images/floorplan.jpg');`

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;`

---

<div class="post-metadata">

**Author:** ![haegar33](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haegar33/32/38805_2.png) [@haegar33](https://discourse.nodered.org/u/haegar33)\
**Post date:** [24 January 2025 21:23 UTC](https://discourse.nodered.org/t/a-static-background-image-in-a-template-node/94882/3 "2025-01-24T21:23:00Z")

</div>

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??

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [24 January 2025 21:47 UTC](https://discourse.nodered.org/t/a-static-background-image-in-a-template-node/94882/4 "2025-01-24T21:47:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 January 2025 22:06 UTC](https://discourse.nodered.org/t/a-static-background-image-in-a-template-node/94882/5 "2025-01-24T22:06:04Z")

</div>

> [@haegar33](#):
>
> a tab with a specific background only for that one tab

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

```auto
#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

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

```

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

---

<div class="post-metadata">

**Author:** ![ziga](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ziga/32/98138_2.png) [@ziga](https://discourse.nodered.org/u/ziga)\
**Post date:** [24 January 2025 22:13 UTC](https://discourse.nodered.org/t/a-static-background-image-in-a-template-node/94882/6 "2025-01-24T22:13:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![haegar33](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haegar33/32/38805_2.png) [@haegar33](https://discourse.nodered.org/u/haegar33)\
**Post date:** [3 February 2025 17:34 UTC](https://discourse.nodered.org/t/a-static-background-image-in-a-template-node/94882/7 "2025-02-03T17:34:35Z")

</div>

Actually I found a solution which was working for my old Dashboard-1 (Versionnumbering within is 2.28.1, last version working with an old iPad5 tablet)

- Creating a Dashboard Tab with only one(!) group called `GFloor`
- Define a ui-template with type `widget in group` and point to `GFloor`
- Content of template:

```auto
<style>
    .container {
    position: relative;
    width: 800px; /* Set the desired width */
    height: 600px; /* Set the desired height */
    background-image: url('/images/floorplan.png'); 
    background-size: cover;
    background-position: center;
    border: 1px solid #ccc; /* Optional: Add a border to the container */
    }
    
    .text1 {
    position: absolute;
    top: 150px;
    left: 220px;
    font-size: 24px;
    color: white;
    }
    
    .text2 {
    position: absolute;
    top: 150px;
    left: 430px;
    font-size: 24px;
    color: red;
    }
    
    .text3 {
    position: absolute;
    top: 350px;
    left: 250px;
    font-size: 20px;
    color: var(--nr-dashboard-groupTextColor);
    }
</style>
<div class="container">
    <div class="text1"><i class="fa fa-thermometer-empty fa-2x" aria-hidden="true"></i> {{msg.payload.t1}}.</div>
    <div class="text2"><i class="fa fa-tint fa-2x" aria-hidden="true"></i> {{msg.payload.t2}}</div>
    <div class="text3">Some static text</div>
</div>

```

Now I can inject some values like `msg.payload.t1` together with some icons to display temperature sensors on top of a floorplan etc..

---

<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:** [17 February 2025 17:34 UTC](https://discourse.nodered.org/t/a-static-background-image-in-a-template-node/94882/8 "2025-02-17T17:34:36Z")

</div>

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