# Request help with CSS button and SVG backgrounds

**URL:** <https://discourse.nodered.org/t/request-help-with-css-button-and-svg-backgrounds/62534>\
**Category:** Dashboard\
**Created:** [11 May 2022 23:36 UTC](https://discourse.nodered.org/t/request-help-with-css-button-and-svg-backgrounds/62534 "2022-05-11T23:36:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [11 May 2022 23:36 UTC](https://discourse.nodered.org/t/request-help-with-css-button-and-svg-backgrounds/62534/1 "2022-05-11T23:36:41Z")

</div>

Not to give up on the help requested elsewhere I am asking for help here to maybe get an answer here.

# The scenario:

I want a button that when pressed sends an output.  
It accepts input to set the _background_ image for the button - `.svg` format.

I can get the latter working fine. I send it different messages and it cycles through the files and I see the different/changing `.svg` images.

But as soon as I make a _push button_ the size of the image shrinks by about 10 pixels and I don't get an output anyway.

Sorry.... I have asked and got help in the past with `.CSS` structures.  
In a prefect world - which mine isn't - I should know how to do this.

I don't.

This is a very simple flow I have made to test the `.svg` files are working.  
I can't attach them so for the sake of trying to help, I'll attach them as `.png` files.

```auto
[{"id":"ab9b0354a0a1f2fa","type":"switch","z":"0918ee609bf69fc7","name":"","property":"count","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"2","vt":"num"}],"checkall":"true","repair":false,"outputs":3,"x":3050,"y":1260,"wires":[["d3da114345d9a6ee"],["561b02de064f4b6d"],["d791736a04b93441","d5acf83a41b2167f"]]},{"id":"3fde420cf0e27448","type":"counter","z":"0918ee609bf69fc7","name":"","init":"0","step":"1","lower":"","upper":"","mode":"increment","outputs":"1","x":2910,"y":1260,"wires":[["ab9b0354a0a1f2fa","b188fc566ec7bcd4"]]},{"id":"d3da114345d9a6ee","type":"change","z":"0918ee609bf69fc7","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"/Pictures/ENABLE1.svg","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":3240,"y":1170,"wires":[["fc8cf4608cd9d5c7"]]},{"id":"561b02de064f4b6d","type":"change","z":"0918ee609bf69fc7","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"/Pictures/ON1.svg","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":3240,"y":1210,"wires":[["fc8cf4608cd9d5c7"]]},{"id":"d791736a04b93441","type":"delay","z":"0918ee609bf69fc7","name":"","pauseType":"delay","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":3060,"y":1320,"wires":[["5f01092596a5ab8f","706d38ccf1ab360d"]]},{"id":"d5acf83a41b2167f","type":"change","z":"0918ee609bf69fc7","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"/Pictures/OFF1.svg","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":3240,"y":1250,"wires":[["fc8cf4608cd9d5c7"]]},{"id":"1d96e566d03627e6","type":"inject","z":"0918ee609bf69fc7","name":"Stop","props":[{"p":"reset","v":"true","vt":"bool"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":2740,"y":1260,"wires":[["63e8890cd7323960","3fde420cf0e27448"]]},{"id":"63e8890cd7323960","type":"trigger","z":"0918ee609bf69fc7","name":"","op1":"1","op2":"0","op1type":"str","op2type":"str","duration":"-3","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":2890,"y":1220,"wires":[["3fde420cf0e27448"]]},{"id":"5f01092596a5ab8f","type":"change","z":"0918ee609bf69fc7","name":"","rules":[{"t":"set","p":"reset","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":3230,"y":1320,"wires":[["3fde420cf0e27448","4958ffc858c5d0c2"]]},{"id":"b188fc566ec7bcd4","type":"debug","z":"0918ee609bf69fc7","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"count","targetType":"msg","statusVal":"","statusType":"auto","x":3050,"y":1190,"wires":[]},{"id":"fc8cf4608cd9d5c7","type":"ui_template","z":"0918ee609bf69fc7","group":"d9a63921.b84ff","name":"","order":10,"width":"2","height":"1","format":"<img width=\"100%\" height=\"100%\" alt=\"Image not found\" src = {{msg.payload}} />\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":3050,"y":1060,"wires":[["978dcefec289a7d3","6e96e43353cb65ef"]]},{"id":"2c071b4ea64b76bc","type":"inject","z":"0918ee609bf69fc7","name":"Start","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":2740,"y":1220,"wires":[["63e8890cd7323960"]]},{"id":"9198abd8e0762f13","type":"inject","z":"0918ee609bf69fc7","name":"Inject","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"/Pictures/ENABLE1.svg","payloadType":"str","x":2740,"y":1020,"wires":[["fc8cf4608cd9d5c7"]]},{"id":"19fa2445dad47f83","type":"inject","z":"0918ee609bf69fc7","name":"Inject","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"/Pictures/ON1.svg","payloadType":"str","x":2740,"y":1060,"wires":[["fc8cf4608cd9d5c7"]]},{"id":"fdc85d919a354347","type":"inject","z":"0918ee609bf69fc7","name":"Inject","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"/Pictures/OFF1.svg","payloadType":"str","x":2740,"y":1100,"wires":[["fc8cf4608cd9d5c7"]]},{"id":"978dcefec289a7d3","type":"debug","z":"0918ee609bf69fc7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":3220,"y":1060,"wires":[]},{"id":"6e96e43353cb65ef","type":"ui_text","z":"0918ee609bf69fc7","group":"d9a63921.b84ff","order":13,"width":0,"height":0,"name":"","label":"CLICK - ","format":"{{msg.payload}}","layout":"row-spread","x":3210,"y":1020,"wires":[]},{"id":"d9a63921.b84ff","type":"ui_group","name":"Group 3","tab":"273de47d.2d2bac","order":8,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","name":"TEST","icon":"dashboard","order":22,"disabled":false,"hidden":false}]

```

![stripes21](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/8/281f1a52ffebc905fb24292a3bf33e4bce26e8d2.png)  
 ![ON1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/1/d14ac6a55c6ddc1d97d2883650ee30d9c66b1261.png)  
 ![OFF1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/0/a03654fea43bc6e3b2e0c05b03498347d8ebf3a0.png)

Now something else to understand.  
I'm not sure which size these are.  
(I'll explain in a moment)

Ideally these are 2 x 1 size for the dashboard being 48 x 48 pixel unit size.

When I made the `button` part, the size shown reduced and I had to make them 38 pixels high.  
Don't ask me how/why. But I reduced them to that and they fitted and looked ok.

Ideally 48 x 48 (or sorry: 96) pixels is the nominal size.

There is going to be a fourth image in this set, but as I can't get the button working I decided to not make it just now.

## Other caveats:

I know that you can have 3 types of CSS _visibility_. Global, tab/flow and local.  
Global - obvious.  
tab/flow - the settings are limited to that tab/flow.  
local - only to this node.

I would prefer to keep this all local, as I would like to release this as a _node_ for people to use - if they want. (Probably not, but who knows?)

Sorry for asking the dumb question, but I have tried many times and failed.  
I get it that I have to _put in the effort to learn_ but this is still WAY above my skill set.

I'm surprised I am where I am with Java Script.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 June 2022 23:37 UTC](https://discourse.nodered.org/t/request-help-with-css-button-and-svg-backgrounds/62534/2 "2022-06-10T23:37:38Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.