Website Background Image Resolution: Choosing the Right Size

There is no single correct resolution for every website background. Choose the source dimensions from the background container’s CSS width and height, its aspect ratio at each breakpoint, and the device pixel ratio (DPR) you intend to support. A useful estimate is:

source pixels = rendered CSS pixels × target DPR

For example, a 1,440 CSS-pixel-wide hero targeting DPR 2 needs about 2,880 source pixels across. A 320 CSS-pixel display at DPR 3 needs 960 device pixels across. These are calculations, not universal presets. Keep the smallest suitable candidate for each layout, inspect background-size: cover cropping, and provide a mobile crop when the composition changes.

1. Start with the rendered background area

Measure the element that actually paints the background at the important responsive breakpoints. Record:

• CSS width and height of the section
• Aspect ratio of that section
• Largest viewport the layout supports
• Whether the section height is fixed, fluid, or content-driven
• Whether the image is decorative or conveys information

Do not select an image solely because “1920×1080” is a common desktop size. A full-width hero that is 1,440 CSS pixels wide and 448 pixels tall has a very different crop from a 2,400×900 banner or a portrait mobile panel.

2. Calculate source pixels with DPR

Multiply the rendered CSS dimensions by the target density:

Rendered area	Target DPR	Approximate source size
1,440 × 448 CSS px	1×	1,440 × 448 px
1,440 × 448 CSS px	2×	2,880 × 896 px
390 × 520 CSS px	2×	780 × 1,040 px
320 CSS px wide	3×	960 px wide

MDN describes serving no more than roughly 2× DPI as a practical rule of thumb for many cases. Treat that as guidance: a very dense source can add bytes without visible benefit, while a low-density source can look soft on high-DPR screens. [web.dev’s responsive-image guidance]

3. Understand what background-size: cover does

cover scales an image until the entire container is filled. If the source and container have different aspect ratios, some pixels are cropped. The crop can change dramatically between a wide desktop hero and a narrow phone viewport.

.hero {
  min-height: 28rem;
  background-image: url("hero-wide.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Keep faces, products, and other important subjects away from edges that may be removed. Use background-position to bias the crop when appropriate, or create a separate mobile composition when the focal point cannot survive the crop. [MDN: background-size]

4. Choose one source or responsive variants

One source

One image is simplest when the aspect ratio stays similar, the focal subject is central, and the source is not excessively large for mobile visitors. It also reduces asset-management work.

Multiple viewport variants

Use separate files when desktop and mobile have very different shapes or when sending the desktop source to a phone wastes substantial bytes.

.hero {
  min-height: 28rem;
  background-image: url("hero-small.webp");
  background-position: center;
  background-size: cover;
}

@media (min-width: 60rem) {
  .hero {
    background-image: url("hero-wide.webp");
  }
}

The breakpoint and dimensions should follow your layout. A mobile image can be smaller in pixels and can use a different crop or subject placement.

Density alternatives with image-set()

When the composition is the same but density differs, CSS image-set() can offer density candidates:

.hero {
  background-image: image-set(
    url("hero-1x.webp") 1x,
    url("hero-2x.webp") 2x
  );
  background-size: cover;
  background-position: center;
}

Verify browser support and test the actual network requests in your target browsers. [MDN: image-set()]

5. Background or HTML image?

Use a CSS background for decoration that does not add information. If the picture communicates meaning, use an HTML <img> with alternative text and responsive image markup instead. HTML images can receive higher loading priority than CSS backgrounds and are easier to describe to assistive technology. [MDN: responsive images]

<picture>
  <source media="(max-width: 599px)" srcset="hero-mobile.webp">
  <img
    src="hero-wide.webp"
    alt=""
    width="2880"
    height="896"
    decoding="async"
  >
</picture>

An empty alt is appropriate only when the image is genuinely decorative. Meaningful images need a useful description.

6. A complete sizing workflow

1. Inspect the layout. Measure the background element at mobile, tablet, and the widest desktop breakpoint.
2. Classify the image. Decide whether it is decorative CSS or meaningful content that belongs in HTML.
3. Set a density target. Start around 1× or 2× for the supported devices; calculate the source dimensions from CSS pixels × DPR.
4. Check the crop. Preview cover at every breakpoint and move the focal point or create an art-directed crop.
5. Create candidates. Add a smaller mobile file when the desktop asset would be unnecessarily heavy or compositionally wrong.
6. Choose format and compression. Optimize after dimensions and crops are final. Compare visual quality and delivered bytes in the real page.
7. Verify delivery. Use browser developer tools to confirm the intended candidate is requested and that no oversized source is downloaded on small screens.

7. Practical resolution recommendations by layout

Layout	How to size it	Typical decision
Full-width desktop hero	Use the hero’s maximum CSS width and height multiplied by the chosen DPR.	Often provide a wide 1×/2× source plus a mobile crop.
Mobile-only panel	Measure the phone layout’s CSS box; do not reuse a huge desktop file automatically.	Use a portrait or tightly composed mobile asset.
Card or component background	Size for the component’s maximum rendered dimensions, not the viewport.	A small source is usually sufficient.
Full-page decorative texture	Consider whether a repeatable texture or gradient can replace a photographic background.	Keep the source proportional to the visible area and optimize bytes.

8. Common mistakes

• Using one desktop preset everywhere: the container’s shape and crop change across breakpoints.
• Ignoring DPR: a source that matches CSS pixels at 1× may look soft on a 2× display.
• Sending the largest source to phones: use a smaller candidate when the layout permits it.
• Putting meaningful content in CSS: users cannot get equivalent alternative text from a decorative background.
• Choosing an arbitrary file-size limit: the right byte size depends on dimensions, format, compression, and visual detail.
• Testing only one viewport: inspect wide, narrow, tall, and unusually short windows.

9. Troubleshooting

Symptom	Likely cause	Fix
Subject is cut off on phones	cover is cropping a wide source into a tall container.	Use a mobile crop, adjust background-position, or change the composition.
Background looks blurry	Source pixels are below the rendered CSS size × DPR.	Supply a higher-density candidate, within a sensible byte budget.
Mobile loads a very large file	Only the desktop declaration is being served.	Add a media-query variant or density candidates and verify the request in DevTools.
Important text disappears	Text was baked into an image or placed in a crop-prone region.	Keep text in HTML and reserve safe space in the composition.
Image is not visible	The element has no height, the URL is wrong, or another rule overrides the background.	Inspect computed styles, confirm the URL response, and give the element an explicit or content-driven height.
Page feels slow despite a small image	The background is discovered late or competes with critical resources.	Use an HTML image for meaningful hero content, reduce bytes, and avoid loading a desktop asset on mobile.

10. Performance, reliability, and cost

Responsive candidates reduce transfer bytes for visitors whose layouts need less coverage. The best source is the smallest one that remains sharp in its rendered container. Evaluate compression in context: photographic scenes, gradients, illustrations, and textures respond differently to formats and quality settings.

Keep the focal subject stable across crops, and test slow connections as well as high-DPR screens. A background that is visually decorative should not delay essential content. If the image is meaningful, an HTML image gives you semantics, alternative text, and responsive markup.

11. Inspect the result with a real screenshot

After implementing responsive backgrounds, capture the page at representative viewport sizes to review crop, sharpness, and loading-state problems. You can use browser automation yourself, or use ScreenshotNeo, a website screenshot API with viewport, device, full-page, wait, CSS, JavaScript, and blocking controls.

Or skip the browser setup

ScreenshotNeo accepts one GET request and returns PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation for the options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are never billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. An MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

12. FAQ

Is 1920×1080 the correct website background size?

Only if it matches the rendered area, aspect ratio, and density you need. It is not a universal preset.

Should I always make a 2× image?

Use 2× when the extra detail is visible and the added bytes are justified. A lower-density candidate can be appropriate for some layouts and devices.

Does cover distort the image?

No. It preserves aspect ratio, but it can crop edges to fill the container.

Can CSS backgrounds have responsive alternatives?

Yes. Use media queries for viewport or art-direction changes and image-set() for density candidates.

When should I avoid a background entirely?

When the image conveys information, needs alternative text, or should be prioritized and discovered as content. Use an HTML image in those cases.