Why Does My CSS Product-Banner Background Use a Low-Resolution Image Even Though I Supplied a 2x Version?

Confirm the banner really uses CSS image-set

Ask the storefront maintainer to inspect the computed background-image declaration on the affected element. A file uploaded to the theme's asset library is not necessarily included in the CSS candidate list.

MDN documents image-set() as a CSS image function that offers multiple candidates with resolution descriptors such as 1x and 2x. Its purpose is to let the browser choose an appropriate resource rather than make the author hard-code one file for every device.

Record the exact CSS rule, including any responsive overrides, candidate URLs, resolution descriptors, and background-size behavior. Confirm that the declaration applies to the element actually visible on the page.

This is different from HTML srcset on an img element. Do not look for the image element's currentSrc property when the artwork exists only as a CSS background. Use computed styles and network evidence instead.

Compare device density with the selected resource

Record the banner's rendered width in CSS pixels, browser zoom, and the device's reported pixel density. Then inspect the browser's network requests and identify the image that actually transferred.

MDN explains that image-set selection can account for resolution and device or network conditions. A browser on a constrained connection may select a lower-resolution candidate even on a high-density screen. Therefore, a 1x request is not automatically a browser defect.

Check the delivered image's intrinsic dimensions and compare them with the actual background display size. For a 600-CSS-pixel-wide banner at density 2, approximately 1200 source pixels across is a useful initial inspection budget if the image fills that width without additional cropping or enlargement. It is not a universal image-size requirement.

If the browser chooses a nominal 2x resource but the file itself is undersized or already soft, fix the asset. If the browser chooses a lower-density candidate, investigate the declared options and selection conditions. If the correct image is selected but visibly cropped, investigate CSS framing rather than resolution.

Hypothetical seasonal product banner

Hypothetical illustration—not an executed browser test: a fictional ceramic-mug promotion uses a 600-CSS-pixel-wide banner. The theme declares mug-banner-1x.jpg at 1x and mug-banner-2x.jpg at 2x. Their stipulated widths are 600 and 1200 pixels respectively.

A shopper reports soft lettering on a high-density display. The proposed investigation records devicePixelRatio, actual computed CSS, selected network URL, downloaded dimensions, and whether the approved source contains sharp lettering.

If the browser selected the 600-pixel candidate, the developer should investigate selection conditions before assuming the 1200-pixel asset was unavailable. If the 1200-pixel candidate loaded but the lettering remains soft, the source or its encoding may be responsible. If a CSS background-size: cover rule crops the lettering, neither candidate resolves that composition problem.

These are alternative possible observations, not claimed test results.

Repair the delivery route without increasing every download

Correct missing or inappropriate image-set declarations in the storefront theme. Keep the approved source artwork and intended banner crop fixed while comparing candidates.

Do not force the 2x file for every visitor simply because one high-density screen looks soft. That can increase transfer cost for devices that do not benefit from the additional pixels. Evaluate the actual resource choice and visible detail across representative conditions.

Inspect the final deployed page, not just the local CSS editor. Caching, theme overrides, and production asset URLs can make the delivered declaration differ from the one a developer intended.

If the background carries essential product information, provide an appropriate semantic text representation in the page. MDN notes that CSS background images are not announced as meaningful images to assistive technology. A sharper background alone does not make important embedded information accessible.

Record the approved CSS rule, selected candidate, displayed dimensions, and observed result for each condition. A successful network request establishes delivery, not product-image accuracy or readable promotional text.

Record your own observations

The filled rows are illustrative examples. Use the blank row for your own files and observations.

Download the editable CSV worksheet

What the references establish

• MDN — image-set() CSS Function: Documents resolution-qualified CSS image candidates, browser selection, device and bandwidth considerations, and examples of 1x and 2x background resources.
• MDN — CSS Resolution Type: Defines x, dppx, dpi, and related resolution units used by CSS image selection.