[css-backgrounds] Specify a rendering method for background images

[chriskirknielsen]

Howdy,

I've run into this a couple times now where I'd like to add a background pattern on an element, but using a background-size which doesn't match the original image size causes it to get resampled and smoothed out. This is usually desired, as it is with images, but some use-cases exists, also as seen with images, where a pixelated outcome is more desirable.

Example

This kind of control could be provided to authors similar to how images can be set to a different rendering method:

background-rendering: pixelated;

Syntax

With a syntax definition that could look like this (I have no idea what I'm doing, lifting this from image-rendering):

background-rendering = <render-mode>#

<render-mode> =
  auto          |
  smooth        |
  high-quality  |
  pixelated     |
  crisp-edges

Current workarounds

While the current workaround would be to put an image as an absolutely positioned element behind the content, this does not solve the problem of patterns that repeat an unknown amount of times to fill the container. I assume this could be achieved with an SVG pattern and some trickery, but that requires either non-trivial knowledge of SVG, or requires copying code from somebody else authors don't understand. A simple CSS property would make it a lot easier than arcane incantations.

I could not find any existing issues for this but if this has been proposed in one way or another (perhaps via the filter() function?) I'd gladly read up on it.

Use cases

My particular use-case relates to a noise image, which gets scaled and looks a little blurry in some cases.

I can also imagine a pixel-art webpage where, for example, there would be a grass texture in the footer, which should not be anti-aliased as it gets scaled.

No clue how this would interact with a *-gradient but given those are generated, as far as I understand, at full resolution, this property would only affect "real" images that have been scaled. On the other hand, I could also imagine a use-case where you'd want something like scanlines via a repeating-linear-gradient to be rendered in a pixelated manner, so maybe there'd be a way to enforce that, but using round pixel colour stops seems to be fine to achieve this in most cases.

Thank you for reading!

[valtlai]

On Chrome and Firefox, image-rendering applies to background images too, but on Safari, it doesn’t.

[chriskirknielsen]

@valtlai Oh that's good to know! Silly me just assumed this applied strictly to images but re-reading MDN, I see "to any images set in its other properties" which, of course, applies to a background-image. Thank you!

By moving things around into different layers, I can get a pixelated background image, and smooth image content, which is what I was after. I guess I should have added this to interop instead, eh? 😅

[SebastianZ]

@chriskirknielsen Given that image-rendering seems to cover your use case, can this issue be closed?

Sebastian

[chriskirknielsen]

@SebastianZ Unless there are use-cases I'm missing (applying a pixelated effect to a mask image but not the background (which would be a separate issue), maybe?), I think so! Thanks, y'all!

[SebastianZ]

applying a pixelated effect to a mask image but not the background (which would be a separate issue)

Yes, that would be a separate issue.

Sebastian