AVIF in CSS background-image Across Modern Browsers

This article provides an overview of how the CSS background-image property handles the AVIF image format across all modern rendering engines. It covers the current support landscape across Blink, Gecko, and WebKit, details native implementation behaviors, and demonstrates the practical techniques—such as the CSS image-set() function and cascading fallbacks—required to deliver AVIF background assets reliably without breaking older browsers.

Modern Rendering Engine Support for AVIF

All three primary rendering engines—Blink (Google Chrome, Microsoft Edge, Opera), Gecko (Mozilla Firefox), and WebKit (Apple Safari)—natively support AVIF (AV1 Image File Format) inside the CSS background-image property.

Blink (Chromium): Added native AVIF support in version 85. AVIF images applied via background-image: url(...) parse and decode via the native libavif integration without requiring vendor prefixes or special flags.
Gecko (Firefox): Enabled full AVIF support by default in Firefox 93. Gecko decodes AVIF background images asynchronously, minimizing main-thread blocking during layout and paint cycles.
WebKit (Safari): Introduced AVIF support in Safari 16.4 on iOS and macOS Ventura/Sonoma. WebKit relies on platform-level decoding frameworks, meaning hardware acceleration is utilized where supported by the operating system.

Because all current stable releases of these engines include AVIF decoders, declaring background-image: url('hero.avif') works universally on up-to-date browsers.

Delivering AVIF with Fallbacks

While current engine releases support AVIF, real-world deployment requires graceful degradation for older clients (such as Safari 16.3 and below, or legacy Internet Explorer/Edge releases).

Method 1: The CSS `image-set()` Function

The modern and standard method to serve AVIF background images with appropriate fallbacks is the CSS image-set() function combined with the type() specifier.

.hero {
  /* Fallback for engines with no image-set support */
  background-image: url('hero.jpg');

  /* Modern format negotiation */
  background-image: image-set(
    url('hero.avif') type('image/avif'),
    url('hero.webp') type('image/webp'),
    url('hero.jpg') type('image/jpeg')
  );
}

When an engine parses image-set(), it evaluates the formats listed inside the type() functions from top to bottom. If the engine supports image/avif, it fetches and renders the AVIF resource, ignoring the subsequent formats. If the engine does not support AVIF, it skips to WebP or standard JPEG/PNG.

All modern engines fully support the standard image-set() syntax with type() declarations:

Chromium/Blink fully supports image-set() with format types.
Gecko supports image-set() with format hints since Firefox 113.
WebKit standard implementation is available without prefixes in modern versions.

Method 2: The `@supports` Rule

An alternative approach leverages the CSS @supports at-rule. Because CSS feature queries cannot directly evaluate image decoding support dynamically, this method is typically combined with a lightweight feature-detection script (such as Modernizr) or targeted selector strategies:

.element {
  background-image: url('fallback.jpg');
}

/* Applied when a feature-detection script confirms AVIF support */
.avif .element {
  background-image: url('optimized.avif');
}

Performance Characteristics

Using AVIF within background-image provides substantial payload reductions—often 20% to 50% smaller than WebP and up to 80% smaller than legacy JPEG/PNG files. Modern engines process AVIF background assets similarly to any other image format:

Network Fetching: The rendering engine requests the resource during the style and layout phase when the element is matched to the DOM.
Decoding: Decoding takes place asynchronously. Modern engines avoid painting blocks by displaying the element's background-color until the AVIF decode operation completes.
Caching: Decoded raster caches are stored in GPU memory when appropriate, matching the rendering efficiency of traditional image formats.