Responsive Background Images with Perch
I've been developing a site using Perch over the last few weeks and ran into the issue of how to deliver the correctly sized image for each device when using background images.
Perch works well with delivering the right sized image for
<picture> tags but from my understanding background images are a bit trickier.
I've come up with a solution that works for me, which is a little hacky, as it adds an image using the normal tags which generates the images needed, and then suppresses it and removes it from view using
display:none;. It then goes through the array generated and finds the details needed, and then pieces them together to create media queries from that data.
I'm sure there's many ways to improve what I've done, so feel free to contribute if you find a better way of doing it.
I've added this to suggestions and add-on development to provoke some discussion on whether Perch should or could incorporate some way of using responsive background images in Perch