# More questions on the \`template\` node and background pictures

**URL:** https://discourse.nodered.org/t/more-questions-on-the-template-node-and-background-pictures/25717
**Category:** Dashboard
**Created:** [29 April 2020 04:44 UTC](https://discourse.nodered.org/t/more-questions-on-the-template-node-and-background-pictures/25717 "2020-04-29T04:44:33Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [29 April 2020 04:44 UTC](https://discourse.nodered.org/t/more-questions-on-the-template-node-and-background-pictures/25717/1 "2020-04-29T04:44:33Z")

</div>

Ok, I am again confused with the terms with Node-Red.

There is a `Dashboard`. On said Dashboard, there are `Groups`.  
OK. I can get that.

If I want to add a background picture to my dashboard, I use a `template` node and put something like this:

```auto
<style>
    body {
        background-image: url("/Pictures/gauges.jpg");
        background-size: cover;
    }
</style>

```

And set the node to:  
`added to site <Head> section`

This adds the picture ("/Pictures/gauges.jpg") to the backdrop.

Again: Nice.

If you want to put a picture in/on to a `group` on that page you would do something like:

```auto
<style>
    body {
        background-image: url("/Pictures/gauges.jpg");
        background-size: cover;
    }
   #(name){
      background-image: url("/Pictures/metal_2.jpg");
    }
</style>

```

And that would put a picture of `metal_2.jpg` in side the `group` of _name_.

Again, not rocket science.

But say you have multiple Dashboards and want different pictures on each _page_?

Then it gets a bit tricky.

First you have to change the `template` node form:  
`added to site <Head> section` to `Widget in group`.  
Then you can start to put different pictures on different...... _pages_?  
(What is the correct term here?)

But that comes at a cost!

You _gain_ a 1 x 1 node which needs to be hidden somewhere on the page.  
Which kind of goes against having a pattern/picture. It will be a 1 x 1 "blank" patch.

So, what's the solution?

I don't know how to put pictures on different _pages_ without doing that.  
And I don't think that is a big ask.

(No! Please... Not `CSS`! ) 😭😉

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [29 April 2020 08:29 UTC](https://discourse.nodered.org/t/more-questions-on-the-template-node-and-background-pictures/25717/2 "2020-04-29T08:29:57Z")

</div>

> [@Trying\_to\_learn](#):
>
> But say you have multiple Dashboards and want different pictures on each _page_ ?
> 
> Then it gets a bit tricky.
> 
> First you have to change the `template` node form:  
> `added to site <Head> section` to `Widget in group` .  
> Then you can start to put different pictures on different...... _pages_ ?  
> (What is the correct term here?)

The correct term is `tab` as that is what they are called when you are creating your dashboard.

I have just looked at the Dashboard HTML to see if there is any CSS class or HTML id that can be used to identify which tab is currently being displayed. If there was such a thing, then you'd be able to add your CSS to the `<head>` as before and have it properly target each tab - in the same way you can already do with groups. Unfortunately it doesn't look like there is.

@dceejay given that each group gets an id to allow it to be targeted, it would seem helpfully consistent if there was an id or class set on an appropriate element that identified which tab was being shown. Not familiar enough with the inner workings to propose anything more specific, but is there an reason I'm missing for why we don't already have that?

@Trying_to_learn so in summary, I think you are stuck to having a ui\_template on the page somewhere. Other's may have some tips or tricks for making it less obtrusive to the page.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [29 April 2020 08:36 UTC](https://discourse.nodered.org/t/more-questions-on-the-template-node-and-background-pictures/25717/3 "2020-04-29T08:36:31Z")

</div>

Thanks Nick.

It isn't that I was wanting to be difficult.

It is what it is.

I guess the `widget in a group` is the only way to do different pictures on different tabs.

Ok.  
Not that crucial just now, more something I noticed.

---

<div class="post-metadata">

### Author: ![mtoko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mtoko/32/138_2.png) [@mtoko](https://discourse.nodered.org/u/mtoko)
#### Post date: [29 April 2020 08:45 UTC](https://discourse.nodered.org/t/more-questions-on-the-template-node-and-background-pictures/25717/4 "2020-04-29T08:45:11Z")

</div>

Have you looked at Bart's svg node. it works great

> **[bartbutenaers/node-red-contrib-ui-svg](https://github.com/bartbutenaers/node-red-contrib-ui-svg)**
>
> A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard - bartbutenaers/node-red-contrib-ui-svg

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [29 April 2020 08:47 UTC](https://discourse.nodered.org/t/more-questions-on-the-template-node-and-background-pictures/25717/5 "2020-04-29T08:47:04Z")

</div>

Interesting.

Thanks.

---

<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: [29 April 2020 12:59 UTC](https://discourse.nodered.org/t/more-questions-on-the-template-node-and-background-pictures/25717/6 "2020-04-29T12:59:03Z")

</div>

So as it happen I was in there looking at collapsing groups.... - but yes easy enough to make it do

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/d/5d771dc161aac52595f8747c33c43272f2cadc1e.png)  
Of course that assumes no-one will set same tab name twice...

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [29 April 2020 13:17 UTC](https://discourse.nodered.org/t/more-questions-on-the-template-node-and-background-pictures/25717/7 "2020-04-29T13:17:32Z")

</div>

Could it be `Tab_XYZ` to reduce the chance of collision?

---

<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: [29 April 2020 13:46 UTC](https://discourse.nodered.org/t/more-questions-on-the-template-node-and-background-pictures/25717/8 "2020-04-29T13:46:24Z")

</div>

well then it could just be Tab\_Home and Tab\_Home .. but yes would help reduce risk with other types of thing.

In master branch for anyone to test.

---

<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: [29 May 2020 13:46 UTC](https://discourse.nodered.org/t/more-questions-on-the-template-node-and-background-pictures/25717/9 "2020-05-29T13:46:37Z")

</div>

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