[csswg-drafts] [css-backgrounds] Specify a rendering method for background images (#13035)

chriskirknielsen has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-backgrounds] Specify a rendering method for background images ==
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:

```css
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!

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13035 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 29 October 2025 01:35:43 UTC