How to put image background in the Node-Red (Raspberry Pi 5)

Dashboard
4

OK thanks.

Yes, I suspected the image of coffee beans might be what you mean :wink:

On my Raspberry Pi I have a simple dashboard with a background image:

image
image800×347 78.7 KB

It is specified like this:

  • My dashboard tab name is "Consolidated".
    The background image is /home/pi/.node-red/node-red-static/raindrops.jpg
  • In settings.js I have httpStatic: '/home/pi/.node-red/node-red-static/', (I don't like the idea of using /lib/node_modules/node-red/image, can Node-red's web server see that directory?)
  • A ui-template defines the CSS.
    The mistake I keep making is omitting the leading / in the url.
<style> 
#Tab_Consolidated {
    background-image: url("/raindrops.jpg");
}
</style>
2 Likes