Support for CSS background-image #37
Conversation
Elements with [data-slimmage-bg] are handled similarly to img[data-slimmage], but the resulting image url is set as their CSS background-image property. This is meant to be used for background images that are 100% width, i.e. `background-size: 100% auto` is recommended. If you don't use that, you get slightly cropped images on normal displays (because resolution is rounded up in 160px increments by default) and blocky half images on high-dpi displays. The implementation requires querySelectorAll (IE8+). Note that background-size doesn't work on IE8 so check the usual workarounds for that.
v0.3.0 offers It also offers |
Great! I'll try to find time to refactor this and make another pull request. |
Ok, thanks. Please include any copyright notices, and make sure you have employer permission to license it as MIT/Apache. |
Also, on 0.4.0+, you will want to push any DOM elements you change into the array |
I wonder if |
I needed resizable background-images with dynamic content, so I implemented this. The benefit over a CSS-only solution is that changing an image in code is much easier when you only output one data attribute. I'm not sure if you consider this to be in scope of Slimmage.js, but it made sense to implement it as a feature since Slimmage already has a lot of the required infrastructure.
I have written the code at work, so my employer (HiQ Finland) must be mentioned in the copyright notice. Hopefully this is not an issue.