Standard Website Background Image Sizes and Dimensions

There is no single standard website background image size. Choose the source dimensions from the section the image must cover, its aspect ratio, the crop allowed by your design, and the viewport range you support. Then test the result at the actual CSS dimensions your site uses.

A common decorative hero might begin with a wide source such as 1920 pixels, but that number is only a starting point for a particular layout. A narrow mobile hero, a full-screen banner, and a short card header have different requirements. The CSS container and background-size determine what visitors actually see.

1. Start with the rendered section, not a preset pixel size

Measure or define the element that will display the image:

Rendered width at each supported layout.
Rendered height or aspect ratio.
Whether the image is decorative or carries information.
The focal subject that must remain visible.
Whether cropping is acceptable.

Compare the source ratio with the container ratio. If the source is 2400×1200 (2:1) and the hero is 1200×500 (2.4:1), a cover crop will remove part of the image vertically. If the hero becomes 390×700 on mobile, the crop is much more severe. Move the subject toward a safe area or provide an art-directed mobile asset.

Layout decision	Use when	Trade-off
One flexible source	The subject tolerates cropping across layouts	Simpler maintenance, but may waste bytes or lose the subject
Viewport-specific sources	Desktop and mobile compositions differ materially	More files and rules, better crop and transfer size
HTML `img`	The image is meaningful content or a prominent visual	Better responsive source selection and discoverability
CSS background	The image is presentational decoration behind content	Convenient layering, but CSS backgrounds are not found by the preload scanner like HTML images

2. Understand `cover`, `contain`, and positioning

background-size: cover scales the image until both dimensions cover the background positioning area. When aspect ratios differ, some pixels are cropped. contain scales the complete image into the area, which can leave uncovered space; with repetition enabled, that space can tile. These behaviors are documented by MDN’s background-size reference and its background resizing guide.

.hero {
  min-height: 28rem;
  background-image: url("/images/hero-1920.webp");
  background-size: cover;
  background-position: 50% 40%;
  background-repeat: no-repeat;
  background-color: #172033;
}

.hero--contain {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

Use background-position to keep the focal point visible. Test positions such as center top, 65% center, or a pixel value when the subject is off-center. Do not assume that a source with more pixels will preserve every edge: cover can still crop it.

3. Choose practical source dimensions

Set a maximum rendered width for each layout, then export enough pixels for the largest display scale you support. For example, a 1440 CSS-pixel desktop hero viewed at a 2× device scale may need roughly 2880 source pixels across if the image must remain sharp. This is a design calculation, not a universal standard.

Use the smallest source that still looks good at the target size. A 4000-pixel image used in a 390-pixel mobile banner can add transfer cost without improving the crop. Conversely, an undersized source will look soft on a large or high-density display.

Example starting points (not standards)

Example section	Possible starting export	What to verify
Wide desktop hero	1920–2880 px wide	Crop at the shortest supported desktop height and at 2× density
Mobile hero	750–1440 px wide, often with a different crop	Subject visibility in a tall, narrow container
Full-bleed section	Based on the largest section width and display scale	Whether the section can become extremely tall on small screens
Small card background	Based on the card’s actual rendered width	Text contrast and whether a background is appropriate at all

These ranges are practical starting points for the example layouts above, not web standards. The correct dimensions come from your CSS and crop tests.

4. Deliver different assets responsively

web.dev’s media-query guidance shows selecting mobile, tablet, and desktop backgrounds. Its breakpoints are example implementation choices, not universal device standards. Use breakpoints that match where your composition or rendered size changes.

.hero {
  min-height: 30rem;
  background: #182236 url("/images/hero-desktop.webp") center 40% / cover no-repeat;
}

@media (max-width: 900px) {
  .hero {
    background-image: url("/images/hero-tablet.webp");
  }
}

@media (max-width: 600px) {
  .hero {
    min-height: 34rem;
    background-image: url("/images/hero-mobile.webp");
    background-position: 62% center;
  }
}

Each file should be art-directed for its target crop when necessary. If the same composition works everywhere, a single optimized file is easier to maintain.

5. Prefer responsive HTML images for meaningful visuals

CSS backgrounds are suitable for decoration. If the image communicates information or is likely to be the largest contentful element, consider an HTML image with srcset and sizes. The web.dev responsive images guide explains source selection, while its background article notes that CSS backgrounds are not discoverable by the preload scanner in the same way.

<picture>
  <source media="(max-width: 600px)" srcset="/images/hero-mobile.webp">
  <source media="(max-width: 1100px)" srcset="/images/hero-tablet.webp">
  <img
    src="/images/hero-desktop.webp"
    srcset="/images/hero-desktop-1600.webp 1600w,
            /images/hero-desktop-2400.webp 2400w"
    sizes="100vw"
    width="2400"
    height="1000"
    alt=""
  >
</picture>

Use an empty alt only when the image is decorative. Give meaningful images descriptive alternative text. Define width and height (or an equivalent aspect ratio) to reduce layout shift.

6. A complete CSS test page

Save this as background-test.html, replace the image paths, and resize the browser window through your supported widths.

<!doctype html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background crop test</title>
<style>
  * { box-sizing: border-box; }
  body { margin: 0; font: 16px/1.5 system-ui, sans-serif; }
  .hero {
    min-height: 65vh;
    display: grid;
    align-items: center;
    padding: clamp(1.5rem, 5vw, 5rem);
    color: white;
    background: #172033 url('/images/hero-desktop.webp') center 40% / cover no-repeat;
  }
  .hero__content { max-width: 38rem; }
  @media (max-width: 900px) {
    .hero { background-image: url('/images/hero-tablet.webp'); }
  }
  @media (max-width: 600px) {
    .hero {
      min-height: 34rem;
      background-image: url('/images/hero-mobile.webp');
      background-position: 62% center;
    }
  }
</style>
<main class="hero">
  <div class="hero__content">
    <h1>Check the focal point at every width</h1>
    <p>Resize this page and confirm that the subject, contrast, and text remain usable.</p>
  </div>
</main>
</html>

7. Crop, quality, and performance checklist

Inspect the narrowest, widest, and tallest supported containers.
Keep faces, products, and other essential subjects away from crop-prone edges.
Use background-repeat: no-repeat unless tiling is intentional.
Provide a solid background color while the image loads and behind transparent areas.
Compress each variant and compare visual quality at its real rendered size.
Send the smallest file that still looks sharp for that viewport.
Use media queries or responsive image markup when desktop and mobile downloads differ substantially.
Check Largest Contentful Paint for prominent backgrounds; an HTML img may be easier for the browser to discover and prioritize.

In one web.dev tutorial demo, the mobile background was approximately 67% smaller than the desktop asset. That result belongs to that example and should not be treated as a general savings promise. See web.dev’s image performance guidance for broader optimization principles.

8. Verify the rendered crop with screenshots

Manual browser resizing is useful, but repeatable screenshots make regressions easier to spot. Capture representative viewport sizes after changing the source or CSS, and compare the focal point, text contrast, and section height.

Or skip the browser setup

ScreenshotNeo returns a website screenshot or PDF from one GET request. It can capture a chosen viewport or device preset, full pages with lazy images loaded, a single CSS-selected element, dark mode, retina scale, custom CSS and JavaScript, waits, request blocking, headers, cookies, geolocation, caching, and more. Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing result.

Use the API with the same test URL at each viewport you support. Full API details are in the ScreenshotNeo documentation.

cURL

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

Python

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)

Node.js

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

ScreenshotNeo also provides an MCP server for Claude, Cursor, and other MCP clients, with take_screenshot, get_page_info, and capture_pdf tools. It includes 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000 shots, and every feature is available on every plan.

Create a free ScreenshotNeo account to generate your crop checks.

9. Troubleshooting

Symptom	Likely cause	Fix
The subject disappears on mobile	`cover` crops a portrait container	Change `background-position`, redesign the crop, or provide a mobile asset
Blank bands appear around the image	`contain` leaves unused space	Use a matching background color, disable repetition, or choose `cover` if cropping is acceptable
The image repeats	Default repeat behavior fills uncovered space	Set `background-repeat: no-repeat`
Text becomes unreadable	Important image detail changes behind the text	Add an overlay, adjust the crop, or use a different art-directed source
Mobile loads a desktop-sized file	One large source is used for every viewport	Use media queries or `picture`/`srcset` with appropriately sized variants
Background appears soft	Source is too small for the rendered size or display scale	Export a larger source for that layout, then compress it
Hero affects LCP	Prominent CSS background is discovered later	Consider an HTML `img`, responsive markup, or carefully planned preload
Screenshot shows a consent banner	The capture ran before consent handling	Use a consent-aware capture flow or ScreenshotNeo’s automatic banner and widget removal

10. FAQ

Is 1920×1080 the standard website background size?

No. It is a common starting point for a wide desktop composition, but the section ratio, crop, and supported screens determine the right source.

Should every breakpoint have its own image?

No. Add variants when the crop or download size changes materially. Keep one source when the subject survives all supported layouts.

Is `cover` or `contain` better?

Use cover when filling the section matters and cropping is acceptable. Use contain when the entire image must remain visible and empty space is acceptable.

What size should a mobile background be?

Derive it from the mobile container’s rendered width, height, crop, and display scale. Test the actual design instead of applying a universal pixel rule.

Can a CSS background be the main page image?

It can, but meaningful or prominent imagery is often better represented by a responsive HTML img so the browser can select and discover the resource appropriately.