demo · v149

CSS Background Rendering

image-rendering applies to all rendered images on an element — including background-image. A small pixel-art tile set as a repeating background will scale with the same crisp nearest-neighbor algorithm when image-rendering: crisp-edges or pixelated is applied to the element, not just to <img> tags.

The pixel patterns below are tiny inline SVG tiles (8×8 or 16×16 px) set as background-image and scaled up via background-size. The only difference between columns is the image-rendering value on the element.

Scale: 8×

Pattern:

auto

smooth

crisp-edges

pixelated

.tiled-bg { background-image: url("data:image/svg+xml,..."); background-size: 8px 8px; /* scaled from 1px tile */ background-repeat: repeat; image-rendering: crisp-edges; /* or: pixelated | smooth | auto */ }

/* image-rendering applies to background-image too */

/* Pixel-art tile used as a repeating pattern background */
.pixel-floor {
  background-image: url("tile.png");
  /* Scale the 8px tile up to 64px — 8× zoom */
  background-size: 64px 64px;
  background-repeat: repeat;

  /* Without this, the browser applies bilinear smoothing and
     the sharp pixel boundaries become blurry. */
  image-rendering: crisp-edges;   /* preserves hard edges */
  /* or: image-rendering: pixelated;  (nearest-neighbor, alias for crisp-edges) */
}

/* Also works on other elements that render background images: */
div, section, header, li, ::before, ::after { image-rendering: crisp-edges; }

/* The property is inherited — set it on a parent to apply to
   all background images in the subtree */
.game-ui { image-rendering: pixelated; }

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

see also

implementation reference