dawaltconley / responsive-images

Static site image processing. Currently a wrapper around eleventy-img.
https://dawaltconley.github.io/responsive-images/
ISC License
1 stars 0 forks source link

Allow setting background images using CSS variables #8

Open dawaltconley opened 11 months ago

dawaltconley commented 11 months ago

This is the cleanest way to handle combining responsive backgrounds with other background layers like linear-gradient. The backgroundFromSizes method would return this:

@media ${selectors} {
  ${selector} {
    ${varName}: url('${q.url}');
  }
}

Only unsure if this should be the default or if I should even support returning background-image. It's easy enough to make this a default for varName, but disallowing it would allow setting :root as a default selector, fewer required variables.

dawaltconley commented 11 months ago

Possibly the way to do this with least CSS and easiest way to bundle media queries is to pass a map of variable names => images to backgroundFromSizes and assign all these variables to :root or a common selector (.responsive-bg or something). Easier to add to global css?