---
title: "LCP element is a CSS background image (perf/lcp-background-image)"
description: "perf/lcp-background-image: Background images are discovered only after CSS is downloaded and applied, so they always start late and cannot use srcset or…"
canonical: https://void-design.vercel.app/rules/perf/lcp-background-image
lastModified: 2026-09-16
---

# LCP element is a CSS background image

`perf/lcp-background-image` · severity **warn** · category Performance · detected by `void perf` and `void audit`

## Why it matters

Background images are discovered only after CSS is downloaded and applied, so they always start late and cannot use srcset or fetchpriority.

## How to fix it

Render the hero visual as an <img> (with object-fit: cover) in the HTML, or preload it with <link rel="preload" as="image" fetchpriority="high">.

## More performance rules

`void perf` reports 25 rules in this category. Core Web Vitals and bytes: LCP, CLS, TBT, TTFB, JavaScript, CSS, fonts, images, caching and compression, measured as the median of several runs on a throttled mobile and a desktop profile.

- `image-budget` Image transfer exceeds the budget — [perf/image-budget](https://void-design.vercel.app/rules/perf/image-budget)
- `too-many-requests` Page makes many requests — [perf/too-many-requests](https://void-design.vercel.app/rules/perf/too-many-requests)
- `lcp-image-lazy` LCP image is lazy-loaded — [perf/lcp-image-lazy](https://void-design.vercel.app/rules/perf/lcp-image-lazy)
- `lcp-image-no-priority` LCP image has no fetchpriority="high" — [perf/lcp-image-no-priority](https://void-design.vercel.app/rules/perf/lcp-image-no-priority)
- `image-oversized` Image is much larger than its rendered size — [perf/image-oversized](https://void-design.vercel.app/rules/perf/image-oversized)
- `image-legacy-format` Image served in a legacy format — [perf/image-legacy-format](https://void-design.vercel.app/rules/perf/image-legacy-format)
- `images-missing-dimensions` Images without width/height or aspect-ratio — [perf/images-missing-dimensions](https://void-design.vercel.app/rules/perf/images-missing-dimensions)
- `render-blocking` Render-blocking resources delay first paint — [perf/render-blocking](https://void-design.vercel.app/rules/perf/render-blocking)

Detected by `void perf` and `void audit`. Explain it in a terminal: `void rules perf/lcp-background-image`