DB2: Dynamic background Image to body

[xx_Nexus_xx]

Hi everyone
I'm able to load a dynamic backgound image to a selected widget

<template>
  <div :style="{ backgroundImage: `url(${this.myimage})` }"></div>
</template>


<script>
  export default {
    data: () => ({
      myimage: "http://192.168.2.251:32400/library/metadata/18131/art/1719252384",
    })
  }
</script>

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

[joepavitt]

We have an example in the documentation for that: UI Template Examples | Node-RED Dashboard 2.0

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.

[xx_Nexus_xx]

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

[joepavitt]

Hmmm, that seems okay, Ill be at my desk in an hour or so, will double check then!

[hotNipi]

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.

[xx_Nexus_xx]

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

[
    {
        "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"
        }
    }
]

[joepavitt]

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:

[xx_Nexus_xx]

This is from MS Edge

[xx_Nexus_xx]

this is from Chrome

[hotNipi]

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.

[joepavitt]

Thanks for the screenshots, it's just outright not loading the CSS

[joepavitt]

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.

[xx_Nexus_xx]

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

[joepavitt]

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

[xx_Nexus_xx]

damn ..why do I always hit these snags

[hotNipi]

For sure the css is not loaded into the page head

page-back is not listed. (even if I changed the name)

[joepavitt]

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:

[xx_Nexus_xx]

[xx_Nexus_xx]

I tried your manual-fix..

• re-selct "UI" option
• "Done"
• "Full Deploy"
• cleared cache

no change for me

[hotNipi]

@joepavitt

_debug

That's fancy tool