I'm building a shop system and whilst there's a default CSS setup for shops I'm customising some of them to add a bit of character. I'm doing this by having something like this in the passage:
font-family: 'Patrick Hand SC', cursive;
-webkit-box-shadow: 0 0 11px 2px rgba(255, 255, 255, 0.35);
-moz-box-shadow: 0 0 11px 2px rgba(255, 255, 255, 0.35);
box-shadow: 0 0 11px 2px rgba(255, 255, 255, 0.35);
font-family: 'Source Sans Pro';
If that's not present then the shop passage falls back on the style defined in the game's main CSS file.
That's been working fine but for the latest shop I'm working on I want to use an embedded image. I've done this elsewhere by encoding it in base64 but those have been stand-alone images using <img> tags. In theory this should work just fine in CSS and the image is under 10 KB.
It seems that I cannot embed the image properly though, at least not using <style> tags. The CSS currently looks like this: https://pastebin.com/gcC1fCE5 (I hit the character limit on here!)
I've included the full image there as from what I can tell pasting it into the style of any given element on any web page successfully adds the woodgrain texture to that element.
Also, oddly, normally I can modify the CSS using browser developer tools but as soon as I add the background imagine the rest of the CSS is shown and applied but is marked in grey and cannot be edited. Very odd.
Is this a limitation of Sugarcube?
Any suggestions on how to add such an image without external files (the main reason I'm using base64)?