Background Image Based on Different Tabs

Dashboard
1

Hi,

So I know how to change the settings file to include the path to images, which can be loaded into my browser. But now I would like to display a different background image based on which tab is selected. So, below is my ui_template "code", what do I need to add to allow for different background images based on the tab?

<div 
    ng-bind-html="msg.payload">
<style>
    body {
        background image: url("/SJ_Floor1.png");
    }
</style>
</div>

Sorry, I'm not a programmer and I know this is probably a basic question, but I'm not finding anything useful when I Google for an answer. Thanks in advance for the help!

2

No responses yet for this, any thoughts on how to accomplish this?

3

It should work if you deploy a ui_template for each dashboard tab.

[{"id":"bd2fdecc.19283","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"a8d5eb7b.233d18","type":"ui_template","z":"bd2fdecc.19283","group":"b44890a6.70f61","name":"Volvo 1","order":0,"width":"5","height":"5","format":"<style>\n\nbody {\n  background-image: url(/nri/volvo.jpg);\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":220,"y":140,"wires":[[]]},{"id":"e1f09145.503c3","type":"ui_template","z":"bd2fdecc.19283","group":"7ab12a2c.e51824","name":"Volvo 2","order":0,"width":"5","height":"5","format":"<style>\n\nbody {\n  background-image: url(/nri/volvo-2.jpg);\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":220,"y":180,"wires":[[]]},{"id":"b44890a6.70f61","type":"ui_group","z":"","name":"G1","tab":"1538c2a0.06fe7d","disp":true,"width":"5","collapse":false},{"id":"7ab12a2c.e51824","type":"ui_group","z":"","name":"G2","tab":"1596f4b.58daa0b","disp":true,"width":"5","collapse":false},{"id":"1538c2a0.06fe7d","type":"ui_tab","z":"","name":"V1","icon":"dashboard","order":2,"disabled":false,"hidden":false},{"id":"1596f4b.58daa0b","type":"ui_tab","z":"","name":"V2","icon":"dashboard","order":3,"disabled":false,"hidden":false}]