Responsive background image that maintains quality
Does anyone have any advice on how to handle background images with
background-size: cover; so they can scale up as the screen expands without becoming pixelated? I'm exploring creating media queries to replace the image at large breakpoints, but the issue is that this image is covering the entire background of the page, so I need to scale vertically and horizontally, while accounting for both potentially pixelating the image. I wrote a postcss plugin for this (https://github.com/sygint/postcss-11ty-responsive-bg-img) , but it's clear to me I need to make it more robust, just curious if anyone has experience with this issue or has some articles I can read, or any advice either way.GitHub
GitHub - sygint/postcss-11ty-responsive-bg-img: A PostCSS plugin to...
A PostCSS plugin to generate responsive images and companion css using eleventy-img - GitHub - sygint/postcss-11ty-responsive-bg-img: A PostCSS plugin to generate responsive images and companion cs...
2 Replies
Have you considered not making it a real background? You could make it a foreground on a layer below the main content. That will allow you to use img srcset, which is not available for backgrounds.
But I use a similar style in other places where I use
background-atrachment: fixed;, but even ignoring those, using an img would require me to use object-fit and then I'd be reproducing the same issue, wouldn't I?