# DB2: Dynamic background Image to body

**URL:** <https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [28 June 2024 04:02 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024 "2024-06-28T04:02:09Z")\
**Posts on this page:** 20\
**Page:** 2

<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:** [28 June 2024 08:39 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/21 "2024-06-28T08:39:06Z")

</div>

Steps to reproduce:

1 Drag in the ui\_template  
2 Write or copy/paste the content into  
3 **Forget** to change the template type to "CSS (All Pages)"  
4 Deploy  
5 Change the template type to "CSS (All Pages)"  
6 Deploy

Result - you can not use this template anymore for CSS (group and page properties are not removed)

---

<div class="post-metadata">

**Author:** ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)\
**Post date:** [28 June 2024 09:00 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/22 "2024-06-28T09:00:41Z")

</div>

Sorry ... did not work ☹ still no background

I did above steps 3 times including Clear-Cache and test with Edge and Chrome browser .. I even used a different TAB and widget-name

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/5/4560ff64e3595d0cd170de2d6947fc6e1c4dba96.png)

---

<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:** [28 June 2024 09:03 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/23 "2024-06-28T09:03:54Z")

</div>

Sorry if I made things worse.

Described steps will lead to the issue.

To make it working  
1 Drag in the ui\_template (and give it a name)  
2 Change the template type to "CSS (All Pages)"  
3 Write or copy/paste the content into  
4 Deploy

---

<div class="post-metadata">

**Author:** ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)\
**Post date:** [28 June 2024 09:23 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/24 "2024-06-28T09:23:23Z")

</div>

yes .. this worked 😉

No I need to get it working dynamically 🤣

Thx a lot for your great help

---

<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:** [28 June 2024 09:25 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/25 "2024-06-28T09:25:31Z")

</div>

> [@xx\_Nexus\_xx](#):
>
> working dynamically

Meaning that you want to change the background by ... (sending msg or by some event happening on dashboard or ..)

---

<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:** [28 June 2024 10:04 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/26 "2024-06-28T10:04:23Z")

</div>

Dynamically

The CSS

```auto
:root{ 
   /* relative url means that this image is served from your static folder. */ 
   /* it works with absolute urls same as well but image loading takes time and all that stuff ...*/      
    --page-background: url(/images/bg-1.jpg);
}

.v-main {
    background-image: var(--page-background); 
    background-size: cover;
}

```

Drag in another ui\_template and set the type:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/a/fac47a0ea22ccf31861c0808224d1bcf7bb9e164.png)

Content will be this:

```auto
<script>
    export default {                    
        watch: {
            msg: function () {
                if (this.msg.payload != undefined) {                                                       
                    document.documentElement.style.setProperty("--page-background", "url("+this.msg.payload+")");
                }
            }
        }    
    }
</script>

```

The payload for that template will be an url of the image:

If from your static folder

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/9/79d378ab251fe3751a78c9324e1c81154e81f8c1.png)

Or with absolute url

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/1254b9aea9aaf45c7c68df912dbd1676dae3ebc7.png)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [28 June 2024 11:15 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/27 "2024-06-28T11:15:22Z")

</div>

could you open an issue if you haven't already please Endel?

---

<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:** [28 June 2024 11:17 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/28 "2024-06-28T11:17:14Z")

</div>

Will do right now.

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [28 June 2024 11:24 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/29 "2024-06-28T11:24:31Z")

</div>

Strange, tried to replicate and not being able to do so...

NR: 4.0.1  
Dashboard: 1.12.2

---

<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:** [28 June 2024 11:24 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/30 "2024-06-28T11:24:53Z")

</div>

Is it not possible without any javascript in the template?

Any code with `this.` goes straight into my "I don't understand this" bin.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [28 June 2024 11:29 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/31 "2024-06-28T11:29:50Z")

</div>

Think of `this` as being a reference to the `ui-template` node. We automatically bind `msg` to the template, so you can access it with `this.msg`

Just overriding the CSS is possible, link from docs is above. If you want `msg.payload`, or some other factor to override the background, then you need to write some JS in order to override the document/body's `background-image` property (also the case in D1)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [28 June 2024 11:33 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/32 "2024-06-28T11:33:07Z")

</div>

Can see the problem:

> <https://github.com/FlowFuse/node-red-dashboard/blob/b15c2193116df668407498749f87689a511b61ff/nodes/widgets/ui_template.js#L12-L20>

I don't account for the CSS use cases here to clear the unnecessary `group` and `page` variables.

---

<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:** [28 June 2024 11:40 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/33 "2024-06-28T11:40:11Z")

</div>

Issue created

> <https://github.com/FlowFuse/node-red-dashboard/issues/1038>
>
> \### Current Behavior
> 
> User wants to make a template for CSS 
> 
> 1 Drag in the ui…\_template (default scope "CSS (All Pages)")
> 2 Write or copy/paste the content into
> 3 Forget to change the template type to "CSS (All Pages)" 
> 4 Deploy
> 5 Change the template type to "CSS (All Pages)"
> 6 Deploy
> 
> Result:
> \- there's no errors in console or any other indicators that something went wrong. 
> \- the CSS is not applied to the document head, user cant see any of desired changes
> \- user can not use this template anymore for CSS (group and page properties are not removed)
> 
> Debug panels comparing broken ad correct ui\_template for CSS
> The broken ui\_template "page-back" has values for page and group.
> 
> !\[image\](https://github.com/FlowFuse/node-red-dashboard/assets/35291460/7238952b-995c-4d3c-ba53-308a173e6621)
> 
> 
> 
> 
> \### Expected Behavior
> 
> Changing the scope should be possible in all ways.
> 
> \### Steps To Reproduce
> 
> Steps to reproduce described above
> 
> Workaround:
> Make new ui\_template but pay attention to not deploy for wrong scope
> 
> 1 Drag in the ui\_template (and give it a name)
> 2 Change the template type to "CSS (All Pages)"
> 3 Write or copy/paste the content into
> 4 Deploy
> 
> 
> \### Environment
> 
> \- Dashboard version: v1.12.2
> \- Node-RED version:v4.0.0
> \- Node.js version:v20.14.0
> \- npm version:
> \- Platform/OS: Windows 10
> \- Browser: Chrome
> 
> 
> \### Have you provided an initial effort estimate for this issue?
> 
> I can not provide an initial effort estimate

---

<div class="post-metadata">

**Author:** ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)\
**Post date:** [29 June 2024 02:00 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/34 "2024-06-29T02:00:49Z")

</div>

It was easy done in D1 .. just a ui-template and below code

```auto
<style>

body {
  background-image: url({{msg.session.art}});
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

</style>

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [29 June 2024 06:17 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/35 "2024-06-29T06:17:04Z")

</div>

I have never tried this, and somehow, wasn't even aware of it, however the Vue docs do state that this is possible with `v-bind`:

> **[Vue.js](https://vuejs.org/api/sfc-css-features.html#v-bind-in-css)**
>
> Vue.js - The Progressive JavaScript Framework

```auto
<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

```

In Vue's `template` you may have seen example using `:attr=""` which is actually shorthand for `v-bind:attr=""`

So, in the `url` case, I think we'd want something like:

```auto
background-image: v-bind('"url(" + msg.payload?.art + ")"')

```

or, if you prefer Javascript's string literals syntax:

```auto
background-image: v-bind('`url(${msg.payload?.art})`)

```

Note, I'm away at the moment, so working via phone and can't test this.

---

<div class="post-metadata">

**Author:** ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)\
**Post date:** [29 June 2024 11:29 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/36 "2024-06-29T11:29:49Z")

</div>

Yeah, thats almost what I posted in my 1st post here .. but this works only within the widget-backgroud ... I could not work for it on the page background. Thats why I tried with your static background-example

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [5 July 2024 09:54 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/37 "2024-07-05T09:54:37Z")

</div>

Just having a play with this again, it's not something I'm able to get working either. I've opened [Support for "v-bind" in \<style\> · Issue #1065 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/1065) to make sure we don't lose track of it

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 July 2024 11:51 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/38 "2024-07-05T11:51:19Z")

</div>

Can't you do this the native way instead of using Vue? Really not that hard to change a style or a class programmatically using the native JavaScript API's.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [6 July 2024 15:30 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/39 "2024-07-06T15:30:48Z")

</div>

Yep, you can, but the request was no JavaScript

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [6 July 2024 15:43 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/40 "2024-07-06T15:43:52Z")

</div>

Sorry to be awkward, but the original request absolutely included both CSS and JavaScript. 🙂

> [@xx\_Nexus\_xx](#):
>
> who could help me to update the code

> [@xx\_Nexus\_xx](#):
>
> `<div :style="{ backgroundImage: `url(${this.myimage})` }"></div>`

So doing this with plain HTML/CSS and JS is pretty simple, no?

[Previous page](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024.md?page=1)