There is no single pixel size that fits every full-page website background. Choose an image for the area it must cover and the viewports you support, then decide whether you can accept cropping. In CSS, background-size: cover fills the area but may crop the image; contain keeps the whole image visible but may leave space uncovered. The right source dimensions depend on that trade-off, the image’s composition, and how it looks in your actual layouts.
Start with the area, not a preset pixel number
A background image has intrinsic dimensions and an aspect ratio: its width relative to its height. CSS sizes it against the element’s background positioning area. That area depends on your page layout and viewport, so a file that works well on one screen shape may crop differently or leave space on another. A square, portrait, or landscape source will each behave differently when used behind a wide page or a tall mobile viewport.
For that reason, a desktop monitor’s resolution is not a universal target for full-page background images. First decide what part of the page the image belongs to, which viewport widths and heights matter to your audience, and what must remain visible in the composition. Those decisions give you a practical target to test; the phrase “full page” alone does not determine a meaningful image dimension.
Choose between cover and contain
The main CSS choice is whether the background must fill its area or whether the entire source image must remain visible. MDN describes cover as sizing the image so it is as small as possible while both image dimensions remain at least as large as the corresponding container dimensions: MDN’s background-size reference.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
| Decision | cover |
contain |
|---|---|---|
| Fills the area edge to edge | Yes | Not always |
| Keeps the whole source visible | Not guaranteed | Yes, unless another rule clips it |
| Can crop the image | Yes, when the image and area proportions differ | No, by itself |
| Can leave uncovered space | No | Yes; the underlying background color or a repeated image may show |
| Common fit | Decorative, full-bleed backdrops | Logos, diagrams, or imagery that must be shown in full |
Use cover when coverage matters most
With cover, the browser preserves the source’s proportions and scales it until the area is covered in both dimensions. If the source and area have different aspect ratios, some image content falls outside the visible area. Set background-position intentionally so the subject or focal point stays in view; centering is only one possible choice.
.hero {
min-height: 70vh;
background-image: url("/images/hero-desktop.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}This example is a starting point, not a prescribed height or universal layout. Adjust the area to your design and move the background position to protect the important part of the image. A focal point near an edge is more vulnerable to cropping than one near the center, particularly when the viewport shape changes.
Use contain when the whole source matters
contain scales the image to fit inside the area without cropping it. The trade-off is that one dimension may not fill the area. The remaining space shows the element’s background color, or can show repeated imagery if repetition is enabled. This is often a better fit when losing any part of a diagram, logo, or other composed image would make it misleading or incomplete.
.illustration {
background-color: #f4f4f4;
background-image: url("/images/diagram.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}Avoid accidental distortion
If retaining the image’s proportions matters, do not give its rendered width and height unrelated values that stretch it. The cover and contain choices preserve proportions while fitting against the background area; the choice between them is about cropping versus uncovered space, not about finding a magic source resolution.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Rank #2
A practical method for selecting image dimensions
- Define the background area. Identify the element or page region being covered, including how its width and height change across the viewport range you support. A full-viewport hero and a background attached to a long page are different areas to evaluate.
- Choose the crop rule. Use
coverif uncovered gaps are unacceptable and cropping is safe. Usecontainif the complete image must be visible and uncovered space is acceptable. - Compose around a focal point. Keep the subject in a part of the image that survives the crops you expect. Choose a deliberate
background-position, and inspect it at narrow, wide, short, and tall viewport shapes that represent your layout. - Decide whether one asset is enough. If a desktop composition crops badly on small screens, or sends unnecessary image data to them, make a viewport-specific file. A mobile file can use a different crop or art direction, not just a smaller copy of the desktop image.
- Export and inspect at the intended use. The source needs enough pixels for its rendered use, but a needlessly oversized image costs bytes without solving a composition problem. The available guidance does not establish a universal source dimension, file-weight limit, or breakpoint; select those from your design and validate the result.
- Revisit the implementation if the image is essential content. If the background is the main meaningful image in the initial view, consider an
<img>or<picture>with responsive sources. This can make image choices explicit in markup and allow the browser to select among sources.
When to use responsive assets or an image element
A single desktop background can be wasteful on small screens and may place the focal point poorly there. CSS media queries let you select a different background asset for a meaningfully different viewport range. Choose breakpoints based on where the layout or composition needs to change; no particular breakpoint is right for every site. MDN’s responsive-image guidance explains the broader responsive image options: Responsive images.
.hero {
background-image: url("/images/hero-wide.webp");
background-size: cover;
background-position: center;
}
@media (max-width: 40rem) {
.hero {
background-image: url("/images/hero-narrow.webp");
background-position: 60% center;
}
}The breakpoint above is only an example. The important check is whether the asset and crop work at the actual widths and heights your design needs. Do not assume that one desktop file is suitable for every screen simply because cover can fill every area.
There is also a loading consideration: web.dev notes that CSS background images are not discovered by the browser’s preload scanner. If a background is visually dominant and important in the initial view, consider whether an inline responsive image or responsive preload strategy better fits the page. Backgrounds remain useful for decorative imagery and layered compositions. The web.dev responsive-background article reports that its particular demo’s mobile background file is 67% smaller than its desktop file; that is a demo-specific comparison, not a general target or guaranteed saving: Serve responsive images.
Check the crop in the rendered page
Image dimensions alone cannot tell you exactly what visitors will see. The visible result depends on the background area, viewport shape, sizing mode, and position. Inspect the rendered page at representative sizes and verify the focal point rather than judging only the original image file.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
- Check both narrow and wide layouts, plus unusually tall or short viewport shapes relevant to your page.
- Look for faces, products, text embedded in the image, or other focal details near the edges; these are most likely to disappear under
cover. - Confirm that
containdoes not leave an unintended-looking gap, and set a suitable background color where uncovered space may appear. - Review the delivered asset as well as its appearance: a needlessly large desktop source should not be sent to every viewport if responsive assets can serve the smaller layout appropriately.
For a rendered-page check, ScreenshotNeo can capture a URL as an image or PDF, including full-page captures. A screenshot is useful for inspecting the crop at a chosen viewport; it does not choose the correct source dimensions for you.
Or skip the browser setup
To save a rendered page as a screenshot, ScreenshotNeo accepts a URL in one GET request. For viewport-specific crop checks, supply the relevant viewport parameters described in the ScreenshotNeo API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport 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}`);ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses identify the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo to start with the free monthly allowance.
Troubleshooting common sizing problems
The image fills desktop but cuts off the subject on mobile
That is a typical cover trade-off when the viewport and source proportions differ. Adjust background-position to keep the focal point visible. If that makes the desktop crop poor, use a separate mobile crop or art-directed asset through a media query.
The whole image is visible, but empty bands appear
That is expected when contain fits an image inside an area with different proportions. Set a background color for the uncovered area, accept the spacing, or switch to cover only if cropping is acceptable.
Rank #4
The image looks stretched
Check whether width and height have been set independently in a way that changes the source proportions. Use a proportional fitting strategy such as cover or contain when the image’s original shape must be retained.
The background loads late in the initial view
If it is the main meaningful image above the fold, account for the fact that CSS background images are not discovered by the browser preload scanner. Consider responsive image markup or a responsive preload strategy for that case; keep CSS backgrounds for decorative or layered imagery where they suit the design.
The image looks soft or unnecessarily heavy
Recheck the source against its rendered use and the range of layouts where it appears. The available guidance does not support one universal pixel count or file-size target. Export a suitable source for the relevant viewport range, then confirm appearance and delivered asset size in your implementation.
Recommended Free Tools
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
