CSS

[ftab]

jekyll-picture-tag does exactly what I need it to do with <img> and <picture>, and it is amazeballs to me that adding webp was as simple as adding formats: [webp, original].

Is there a way I can use it to also help me make media queried CSS background-images for the large full width header backgrounds I have?

Previously, before starting to use Jekyll, I was using a grunt task to generate x320, x640, x1280, and x2560 .webp and .jpgs at 60% quality out of large .jpg source files (basically full quality from the camera), and I had hand-crafted all the picture tags and CSS for this. If possible, I'd love a jekyll-picture-tag equivalent for the CSS backgrounds!

[rbuchberger]

This is certainly doable. I'm pretty busy with other projects at the moment, but I'll try to get to it. Pull requests are certainly welcome.

[jessecrouch]

@ftab At the moment, I believe background images don't have a way to be responsive on their own because image-set is still in draft: https://css-tricks.com/responsive-images-css/

If it becomes a thing you should be able to use the markup: naked_srcset attribute to populate it.

In the meantime, you can use the Javascript solution here and pair it with jekyll_picture_tag as you currently use it: https://aclaes.com/responsive-background-images-with-srcset-and-sizes/

[rbuchberger]

I had in mind an idea to require some selector setting within the preset, and then generate CSS consisting of background-image properties for that selector, within media queries as appropriate. The user could drop a picture tag in a CSS file, or directly within a style tag.

This only handles art direction though, not resolution switching. I'll look into the image set specification; even though it's only a draft, it might still be worth adding support for it now?

[rbuchberger]

I'm going to close this issue. If they ever implement a srcset equivalent in CSS we'll revisit it for now if you want to use background images you can use direct_url.