# Node-Red and images
**URL:** https://discourse.nodered.org/t/node-red-and-images/80866
**Category:** Dashboard
**Tags:** home-assistant, dashboard
**Created:** [28 August 2023 16:49 UTC](https://discourse.nodered.org/t/node-red-and-images/80866 "2023-08-28T16:49:14Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@miriki](https://discourse.nodered.org/u/miriki)
#### Post date: [28 August 2023 16:49 UTC](https://discourse.nodered.org/t/node-red-and-images/80866/1 "2023-08-28T16:49:14Z")
Hi, all!
I am using Node-Red with **ioBroker** on a **Linux 11.3.0** PC for some time now. Actually I just try to visualize a few things from my home network, esp. from mqtt nodes. But I have set up a web radio for mplayer, too. Right now I try to decipher the meaning of the various nodes from a BambuLab printer. (I'm not using foreign designs. All was designed by myself.)
It's kind of "go to the next step" for me: How am I supposed to use images on the dashboard? I mean...
a) How can I set an image as background for a group? Stretched, scaled, clipped or whatever.
b) And how can I use an image underlying some dashboard controls, direct relating. For example: 4 LED controls, where an LED shows the status / actual used port of the AMS (filament changing device) . The LEDs should be placed at the correct position atop the image of the AMS.
c) And finally (until now... 😉 ): How would I change an image at "runtime". Example: The web-radio should display the station's logo (10 buttons for switching) and while playing the radio should display an artist / song (decoded by a function already for displaying) related picture.
d) Extended: Where should I store pictures to be used in the dashboard, esp. on a linux machine? The radio for example might search the internet for artist / song, download an image and display it on the dashboard.
Thank you for listening (tl;dr? Who was that? 😉 ), any help appreciated. Just keep in mind: ioBroker! I found a few sources for HomeAssistant, but was not able to adapt.
Michael
---
### Author:  [@miriki](https://discourse.nodered.org/u/miriki)
#### Post date: [19 September 2023 13:54 UTC](https://discourse.nodered.org/t/node-red-and-images/80866/2 "2023-09-19T13:54:53Z")
nobody? really?
approx. 100 views and after 3 weeks no reply?
_sigh_
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [19 September 2023 14:18 UTC](https://discourse.nodered.org/t/node-red-and-images/80866/3 "2023-09-19T14:18:30Z")
> [@miriki](#):
>
> How am I supposed to use images on the dashboard? I mean...
>
> a) How can I set an image as background for a group? Stretched, scaled, clipped or whatever.
CSS. Give the group a custom class and you can style the background for just that group.
> [@miriki](#):
>
> b) And how can I use an image underlying some dashboard controls, direct relating. For example: 4 LED controls, where an LED shows the status / actual used port of the AMS (filament changing device) . The LEDs should be placed at the correct position atop the image of the AMS.
I suspect this is best done with your own HTML within a dashboard template. However, it might be possible with CSS to position a widget dynamically according to a message property.
I posted an example flow changing the background colour, not position, according to the payload value. It might be worth looking at.
> [@miriki](#):
>
> c) And finally (until now... 😉 ): How would I change an image at "runtime"
CSS again. Pass the image as a msg property.
> [@miriki](#):
>
> d) Where should I store pictures to be used in the dashboard, esp. on a linux machine?
There is a line in settings.js which defines the full pathname of a directory to hold static content.
eg
` httpStatic: '/home/pi/.node-red/node-red-static/',`
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [19 September 2023 14:24 UTC](https://discourse.nodered.org/t/node-red-and-images/80866/4 "2023-09-19T14:24:50Z")
Some times you just fall through the cracks.
a, set a class for the group you can then use css to add images to background
b, not sure i am understanding this one, but again ui-led is available and you can also a class and use css to position to I think.
c, you can use the ui-template to create css, you can change the image set in the template dynamically at runtime.
d, you can set up a http static folder to serve the images
you can search using the forum for extensive examples, and any terms used, using `node-red "term" docs` using a search engine.
Then you can provide short example flows if you have trouble, people will gladly provide feedback and working examples relevant to your examples.
P.s. Most here do not use HA so for that you might find more help on HA forum, but there are some users here.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [19 October 2023 14:25 UTC](https://discourse.nodered.org/t/node-red-and-images/80866/5 "2023-10-19T14:25:24Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.