# 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:** 1
### Author:  [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [28 June 2024 04:02 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/1 "2024-06-28T04:02:09Z")
Hi everyone
I'm able to load a dynamic backgound image to a selected widget
```auto
```
but I do want to have the background on the entire page (in the page behind the widget)
who could help me to update the code ? .. I really suck with this CSS ☹
thx a lot for your help
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [28 June 2024 06:10 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/2 "2024-06-28T06:10:33Z")
We have an example in the documentation for that: [UI Template Examples | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/user/template-examples.html#background-image)
No need for any Javascript, you can just define the CSS in a `ui-template`, and change the template type to "CSS (All Pages)" for it to render everywhere.
---
### Author:  [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [28 June 2024 06:40 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/3 "2024-06-28T06:40:12Z")
yeah .. I had tried that before and now again .. but somehow your sample is not working for me.
I used the exact sample from your reference and have defined below ui-template as CSS for alll pages .. but nothing happens after full rebuild
I'm using lates NR-Beta .4 with dashboard2 (v1.12.2)
I think I miss something ☹
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [28 June 2024 06:53 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/4 "2024-06-28T06:53:05Z")
Hmmm, that seems okay, Ill be at my desk in an hour or so, will double check then!
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [28 June 2024 06:54 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/5 "2024-06-28T06:54:48Z")
Can confirm that the example code works.
You may be need to refresh your browser hard, maybe also to clear the cache.
Also check if you have any errors in browser console.
---
### Author:  [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [28 June 2024 07:14 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/6 "2024-06-28T07:14:40Z")
that is strange as it does not work with me ☹ .. I have cleared the cache and did a full system restart for docker and my front-end system. I have tried with Chrome & Edge but above code is not showing any pattern in background ... and there is no error in the console ☹
```auto
[
{
"id": "d918d9556a91e86a",
"type": "ui-template",
"z": "6e18e178c02e12f4",
"group": "e60dd6e1af7a9b59",
"page": "bf1d2c4dc333aad4",
"ui": "a0ddd2d7af1545fc",
"name": "back",
"order": 1,
"width": "0",
"height": "0",
"head": "",
"format": ".v-main {\n background-image: url(\"https://www.transparenttextures.com/patterns/batthern.png\");\n background-repeat: repeat;\n}",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "site:style",
"className": "",
"x": 730,
"y": 100,
"wires": [
[]
]
},
{
"id": "e60dd6e1af7a9b59",
"type": "ui-group",
"name": "My Group",
"page": "bf1d2c4dc333aad4",
"width": "6",
"height": "1",
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "bf1d2c4dc333aad4",
"type": "ui-page",
"name": "Test",
"ui": "a0ddd2d7af1545fc",
"path": "/test",
"icon": "home",
"layout": "flex",
"theme": "0d7c977402df5308",
"order": 6,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "a0ddd2d7af1545fc",
"type": "ui-base",
"name": "DB2",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"navigationStyle": "default",
"titleBarStyle": "default"
},
{
"id": "0d7c977402df5308",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#ffffff",
"primary": "#0094ce",
"bgPage": "#000000",
"groupBg": "#b8b7b7",
"groupOutline": "#616161"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]
```
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [28 June 2024 07:26 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/7 "2024-06-28T07:26:22Z")
That is very very odd, I've just sanity checked, and it's working locally for me too (even with your exact flow). Can you right click on the background \> "Inspect".
Then in the Developer Tools, find the `main` element and click it for me. Share a screenshot of what CSS declarations it has on it, it'll look something like this:
---
### Author:  [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [28 June 2024 07:32 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/8 "2024-06-28T07:32:26Z")
This is from MS Edge
---
### Author:  [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [28 June 2024 07:34 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/9 "2024-06-28T07:34:35Z")
this is from Chrome
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [28 June 2024 07:40 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/10 "2024-06-28T07:40:41Z")
It is strange. If I import your ui\_template - it doesn't work. But it doesn't show any kind of difference from what I have and which works well.
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [28 June 2024 07:42 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/11 "2024-06-28T07:42:35Z")
Thanks for the screenshots, it's just outright not loading the CSS 🤔
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [28 June 2024 07:44 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/12 "2024-06-28T07:44:33Z")
I've just switched over to the NR-beta, and can reproduce the problem. Have it breaking on a local system, so I can investigate.
---
### Author:  [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [28 June 2024 07:45 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/13 "2024-06-28T07:45:27Z")
Yeah ..thats why I shared to code .. icould not find an issue there.. maybe it is something with the theme ..or any other environment setting.. but what ☹
the \>Inspect is not showing the backgound image in ".v-main" as in example from @joepavitt
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [28 June 2024 07:46 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/14 "2024-06-28T07:46:20Z")
Okay, so I now have it working on the beta, but the solution was an odd one. it didn't work at first, the Editor didn't flag any errors, etc. If I re-selected the `UI` option for the `ui-template`, and then clicked "Done" - it then worked
---
### Author:  [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [28 June 2024 07:46 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/15 "2024-06-28T07:46:26Z")
damn ..why do I always hit these snags 😉
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [28 June 2024 07:47 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/16 "2024-06-28T07:47:16Z")
For sure the css is not loaded into the page head
`page-back` is not listed. (even if I changed the name)
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [28 June 2024 07:48 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/17 "2024-06-28T07:48:51Z")
Can I get one more screenshot from you? Can you navigate to `/dashboard/_debug` - hosted wherever your NR server is.
Then click the "Widgets" tab, and search for your "back" node. Expand the widget, and screenshot me the "Properties" please, will look something like this:
---
### Author:  [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [28 June 2024 08:00 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/18 "2024-06-28T08:00:51Z")
---
### Author:  [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [28 June 2024 08:09 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/19 "2024-06-28T08:09:22Z")
I tried your manual-fix..
- re-selct "UI" option
- "Done"
- "Full Deploy"
- cleared cache
no change for me ☹
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [28 June 2024 08:14 UTC](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024/20 "2024-06-28T08:14:45Z")
> [@joepavitt](#):
>
> `_debug`
That's fancy tool 😛
[Next page](https://discourse.nodered.org/t/db2-dynamic-background-image-to-body/89024.md?page=2)