Can I use different background images for one button?

I was using lemur before I know open stage control.

And despite the ugly ui and the dead community.....lemur is actually quite good(very straight forward).

For instance, if I'm using the "Leds" or "Switch" object, I can straightly asign different images for On/Off

state, there's no coding, you just select the images, and it's done.

But the Open Stage Control is using css for importing image.... And it's just not very easy for me to

figure out how to asign two different images for one button according to it's value(on/off state).

I guess it must be a very dumb question :joy: but I'd really appreciate it if anyone have the solution for this.

Thanks in advance!

You can use the #{} OSC block inside the CSS prop, like so:
*considering the button's Off value is 0 and On value is greater than 0

background-image: #{@{this} ? 'url(ImagePath/image-on.png)' : 'url(ImagePath/image-off.png)'}; // "@{this}" refers to the buttons' current value
background-size: 100% 100%; // this line makes your image follow the button's width and height

Thank you!
It's working perfectly!
So I can directly use java script in the CSS prop?(because this seems to be javascript code...I'm not sure though)

Yeah, javascript blocks in the OSC advanced syntax can be used in any prop.
https://openstagecontrol.ammd.net/docs/widgets/advanced-syntaxes/#javascript-js-code
https://openstagecontrol.ammd.net/docs/widgets/advanced-syntaxes/#javascript-code