# Background image. New problem/question

**URL:** <https://discourse.nodered.org/t/background-image-new-problem-question/15507>\
**Category:** Dashboard\
**Created:** [13 September 2019 13:25 UTC](https://discourse.nodered.org/t/background-image-new-problem-question/15507 "2019-09-13T13:25:51Z")\
**Posts on this page:** 14\
**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:** [13 September 2019 13:25 UTC](https://discourse.nodered.org/t/background-image-new-problem-question/15507/1 "2019-09-13T13:25:51Z")

</div>

(I know I've been down this road before, but. . . .)

Ok, I thought I had it nutted out, but it isn't working.

Are spaces allowed in the name of the tab?

The reason I ask is that one RPI has tabs with spaces in the `tab` (group?) names and the background pattern/picture works.

This one group on this page isn't playing by the same rules.

Example:

Good working on another machine.

Picture 1:

 ![Screenshot%20from%202019-09-13%2023-19-42](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a59af6b4055d2e355c77c836fb9f5ee95104f249.png)

Picture 2:  
(The _problem child_.)

 ![Screenshot%20from%202019-09-13%2023-20-41](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/44a140c778f978df6e72f642b8ca26acbffeddff.png)

If I change the name of the group to `EVENT_messages` (Note the `_`) the picture is there.

Ok. Any thoughts?

(ok, the picture with the `_` in the name to show I am not telling _porkies_.)

 ![Screenshot%20from%202019-09-13%2023-24-41](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4d89d0774dd2b37ece98753d7025c34c6f8b615d.png)

NR 0.20.5  
Dashboard 2.15.4

(ooops)

Ok, I see the slight difference.

I am mixing group names with tab names.

Anyway, the question stands: Can I have spaces in the names as shown here?

---

<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:** [13 September 2019 13:29 UTC](https://discourse.nodered.org/t/background-image-new-problem-question/15507/2 "2019-09-13T13:29:47Z")

</div>

Yes

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/8d34f39a8eae79dfd94fbd8484f554abc89cd240.png)

---

<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:** [13 September 2019 13:32 UTC](https://discourse.nodered.org/t/background-image-new-problem-question/15507/3 "2019-09-13T13:32:22Z")

</div>

Thanks. So thoughts on what is going on why it isn't _playing the game_ here?

---

<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:** [13 September 2019 13:49 UTC](https://discourse.nodered.org/t/background-image-new-problem-question/15507/4 "2019-09-13T13:49:38Z")

</div>

I'm guessing you're setting something transparent but using the wrong name.

---

<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:** [13 September 2019 13:53 UTC](https://discourse.nodered.org/t/background-image-new-problem-question/15507/5 "2019-09-13T13:53:32Z")

</div>

Na. I don't understand what you mean.

Sorry. (Working on it ITMT though.)

It is clearly (no pun intended) doing the right thing if I name it with the `_`.

All I do is change the `_` to a space, edit the node setting the background image and deploy.

This is the code in the node:

```auto
[{"id":"86256a5e.39abf8","type":"ui_template","z":"bda04762.5a2918","group":"226ab9cd.d5189e","name":"Picture Machine health","order":7,"width":"1","height":"1","format":"<style>\n body {\n background-image: url(\"/Pictures/metal_6.jpg\");\n background-repeat: repeat;\n }\n #Events_UPLINK {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n #Events_SOM {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n #Events_WAP {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n #Events_IFF {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n #Events_EVENT_messages {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n </style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":1700,"y":120,"wires":[[]]},{"id":"226ab9cd.d5189e","type":"ui_group","z":"","name":"UPLINK","tab":"870f8bb5.bac21","order":4,"disp":true,"width":"6","collapse":false},{"id":"870f8bb5.bac21","type":"ui_tab","z":"","name":"Events","icon":"format_list_bulleted","order":16,"disabled":false,"hidden":false}]

```

---

<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:** [14 September 2019 02:21 UTC](https://discourse.nodered.org/t/background-image-new-problem-question/15507/6 "2019-09-14T02:21:10Z")

</div>

Didn't mean to seem like I deserted this thread.

I am still not _getting_ it all.

As it is cosmetic, I shall put it down the queue of things needing done.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [14 September 2019 06:48 UTC](https://discourse.nodered.org/t/background-image-new-problem-question/15507/7 "2019-09-14T06:48:12Z")

</div>

Where is the rest of your code: where you actually set the text ?

---

<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:** [14 September 2019 07:06 UTC](https://discourse.nodered.org/t/background-image-new-problem-question/15507/8 "2019-09-14T07:06:40Z")

</div>

This node sets the text:

```auto
[{"id":"7e1e71f3.c4542","type":"ui_template","z":"4e551e33.3cfb7","group":"226ab9cd.d5189e","name":"Picture Machine health","order":8,"width":"1","height":"1","format":"<style>\n body {\n background-image: url(\"/Pictures/metal_6.jpg\");\n background-repeat: repeat;\n }\n #Events_UPLINK {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n #Events_Modem {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n #Events_SOM {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n #Events_WAP {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n #Events_IFF {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n #Events_EVENT_messages {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n </style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":1970,"y":90,"wires":[[]]},{"id":"226ab9cd.d5189e","type":"ui_group","z":"","name":"UPLINK","tab":"870f8bb5.bac21","order":4,"disp":true,"width":"6","collapse":false},{"id":"870f8bb5.bac21","type":"ui_tab","z":"","name":"Events","icon":"format_list_bulleted","order":16,"disabled":false,"hidden":false}]

```

I don't know what else to post, sorry.

I know you asked:

> [@bakman2](#):
>
> Where is the rest of your code

But how much of the "rest" do you want?

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [14 September 2019 07:20 UTC](https://discourse.nodered.org/t/background-image-new-problem-question/15507/9 "2019-09-14T07:20:10Z")

</div>

It only sets css to the head ?

---

<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:** [14 September 2019 07:25 UTC](https://discourse.nodered.org/t/background-image-new-problem-question/15507/10 "2019-09-14T07:25:54Z")

</div>

Yeah, if you say.

I did it that way to get the results I wanted.

`metal_6.jpg` is the _bigger_ background.  
`metal_7.jpg` is the finer background.

In the node I posted:

```auto
    }
    #Events_UPLINK {
    background-image: url("/Pictures/metal_7.jpg");
    }

```

That sets the background (metal\_7) in the `UPLINK` section.

If I rename it to `UP LINK` and do all the relevant editing, it fails.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [14 September 2019 07:28 UTC](https://discourse.nodered.org/t/background-image-new-problem-question/15507/11 "2019-09-14T07:28:46Z")

</div>

I am missing where you are actually setting "EVENT messages"

---

<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:** [14 September 2019 08:11 UTC](https://discourse.nodered.org/t/background-image-new-problem-question/15507/12 "2019-09-14T08:11:36Z")

</div>

Oh. That is a whole other flow.  
All messages to `UPLINK` `SOM` `WAP` `IFF` and `EVENT_messages` are created on big flows.  
They work.

This is an example of what the dashboard looks like when I have a name with a space in it:  
`Modem Uplink` being the one.  
`(depricated)` - well I haven't bothered editing the node to put the background in/on it.

This is the node code now:

```auto
[{"id":"7e1e71f3.c4542","type":"ui_template","z":"4e551e33.3cfb7","group":"226ab9cd.d5189e","name":"Picture Machine health","order":8,"width":"1","height":"1","format":"<style>\n body {\n background-image: url(\"/Pictures/metal_6.jpg\");\n background-repeat: repeat;\n }\n #Events_UPLINK {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n #Events_Modem Uplink {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n #Events_SOM {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n #Events_WAP {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n #Events_IFF {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n #Events_EVENT_messages {\n background-image: url(\"/Pictures/metal_7.jpg\");\n }\n </style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":1970,"y":90,"wires":[[]]},{"id":"226ab9cd.d5189e","type":"ui_group","z":"","name":"Modem Uplink","tab":"870f8bb5.bac21","order":4,"disp":true,"width":"6","collapse":false},{"id":"870f8bb5.bac21","type":"ui_tab","z":"","name":"Events","icon":"format_list_bulleted","order":16,"disabled":false,"hidden":false}]

```

 ![Screenshot%20from%202019-09-14%2018-09-40](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/37b86ab0b40a2392fa33fcfd4b237ffe8ce29ab6.png)

This is a better picture showing the area. Note the arrows to where the missing _pattern_ is,

---

<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:** [14 September 2019 09:04 UTC](https://discourse.nodered.org/t/background-image-new-problem-question/15507/13 "2019-09-14T09:04:48Z")

</div>

I'm away from my laptop so I cannot check, but this sounds like the group DOM element's id attribute is being set from the group's name without any sanitising of invalid characters for an id attribute - ie the space.

If that's the case it is a bug in dashboard and not something you can fix in your flow. The workaround is not using spaces in the names.

---

<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:** [14 September 2019 09:18 UTC](https://discourse.nodered.org/t/background-image-new-problem-question/15507/14 "2019-09-14T09:18:12Z")

</div>

(I got bored)

I renamed the "group" to `Modem_Uplink` and edited the node text to suite.

This is what I get.  
The pattern is shown.

NR 0.20.5  
Dashboard 2.15.4

 ![Screenshot%20from%202019-09-14%2019-16-11](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a15deec978b21560ba723e03c9f7b935d9a6dfed.png)