KP-C

Kevin Powell - Community•3y ago•

2 replies

syg

Responsive background image that maintains quality

Does anyone have any advice on how to handle background images with

background-size: cover;

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...