Hi. I want to make the background a specific image. Not the ares where it is outside of the widgets, I want to put the image behind the widgets. Not on a specific group either. Also, I am using chromium, so the background can cover the local server web page too. This might even look better. I don't know how to do that. I tried inject + media nodes, but they only add images like the way I add widgets. So, how can I do this? The system will be offline. I need to use a pre-downloaded image.
1 Like
You can use a ui-template node and set it to "add to <head> section".
Host the image with the Node-RED runtime by setting the httpStatic property in your settings.js.
The rest can be done via css.
<style>
body {
background-image: url("/images/maelstrom1600.jpg");
background-repeat: no-repeat;
background-position: right top;
background-size: 100%;
}
</style>
It didn't work. I changed the file path in the settings.js to the location of the picture I want to use for the background, then I added the template node under dashboard nodes. I changed it to "add to section". Then, I copied your code, after deleting the code in it (also tried without deleting that). Nothing changed. I added an inject before the node, didn't work. What am I doing wrong? Here is the flow:
[{"id":"30182c0b.d25084","type":"ui_template","z":"7e5c236f.8633ec","group":"72303c1.198bdc4","name":"","order":0,"width":0,"height":0,"format":"<style>\n body {\n background-image: url(\"C:\\Users\\Onur\\Desktop\\pic.jpg\");\n background-repeat: no-repeat;\n background-position: right top;\n background-size: 100%;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":620,"y":360,"wires":[[]]},{"id":"c77260fa.8eb4c","type":"inject","z":"7e5c236f.8633ec","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"","payloadType":"date","x":460,"y":360,"wires":[["30182c0b.d25084"]]},{"id":"72303c1.198bdc4","type":"ui_group","z":"","name":"Default","tab":"d50f4120.5bc2d","order":1,"disp":true,"width":"6","collapse":false},{"id":"d50f4120.5bc2d","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
Here is the change in settings.js:
//httpStatic: 'C:\Users\Onur\Desktop\pic.jpg',
That won't work.
First, the httpStatic setting must point to a directory, not a file.
Second, on Windows you need to either escape the backslash (\\), or use forward slashes (/) for paths.
Third, for the setting to work, it needs to be uncommented, so remove the // at the beginning.
So assuming your static folder is in your node-red working dir, use:
httpStatic: 'C:/Users/Onur/.node-red/static'
and place the picture in there.
PS: I wouldn't use the desktop folder, as it will be exposed via a web server and can contain sensitive data. Use a dedicated folder, preferably in your node-red folder.
PPS: Restart node-red if you made changes to settings.js
One thing I noticed. The url in the css part needs to be relative to the specified static folder.
So if you place your image in
'C:/Users/Onur/.node-red/static/images/pic1.jpg'
you need to use
background-image: url("/images/pic1.jpg");
Restarted. Did the changes you have said. Not working.
Settings.js part:
httpStatic: 'C:/Users/Onur/.node-red/static',
Relative to static, not including static.
Where is your image located?
'C:/Users/Onur/.node-red/static/pic.jpg'? Then use just "/pic.jpg"
I am able to see it for like 0.1 seconds each time I refresh the page now. It covers the other GUI elements too. Picture is above all other things. How can I fix these 2 problems?
1 Like
So it finally get's loaded. 
Those CSS settings worked when I played with Dashboard background images a long time ago.
It should be just on the body, so other elements are always in front of it.
I'm not a CSS expert and out of time at the moment. Maybe someone can step in?
Maybe the problem is about the repeat part? Maybe, there is a way to make it always on? Also, like I have said, everything else (including blue bar on the tap where it says "Home", and all the GUI stuff I put) disappears I refresh, and I see the image alone. Then, it goes back to the old GUI without the image.
That example was from my use-case, you need to play with these settings a bit. The browser's dev tools can come in handy for that ("inspect element"). You can change and try the CSS settings live in your browser until you get it working.
Also, it has been 2-3 years since I used a background image there, so it was running a much older Dashboard version.
I solved it by copying the image to .node-red folder. This is the setting.js line:
httpStatic: 'C:/Users/Onur/.node-red/',
This is the node (it doesn't need an inject):
[{"id":"aef760ca.6f201","type":"ui_template","z":"7e5c236f.8633ec","group":"72303c1.198bdc4","name":"","order":1,"width":0,"height":0,"format":"<style>\n body {\n background-image: url(\"/pic.jpg\");\n background-repeat: no-repeat;\n background-position: right top;\n background-size: 100%;\n background-attachment: fixed;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":240,"y":400,"wires":[[]]},{"id":"72303c1.198bdc4","type":"ui_group","z":"","name":"Default","tab":"d50f4120.5bc2d","order":1,"disp":true,"width":"6","collapse":false},{"id":"d50f4120.5bc2d","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
That is no different from using a subfolder, except one level up. I don't think that's the cause of the problem. Maybe you changed some other things along the way. 
Also, I wouldn't expose the whole .node-red folder via http for security reasons.
But if it's working now, and just a local install, you could leave it at that.
Didn't change anything, just copied it there too.
The system will be offline when I am done. So, there won't be a security issue like that.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
