Free tools Windows power users keep installed
One-click scans. No signup required.
There is no single pixel size that WordPress recommends for every website background image. Choose dimensions for the specific area that will display the image, account for the largest display size you need to support, and preview the crop at both wide and narrow viewport widths. In WordPress, the display setting matters as much as the source image: Cover fills an area and can crop the image, while Contain shows the whole image and may leave empty space.
Why there is no universal WordPress background image size
A background image belongs to a particular area: perhaps the site-wide page background, a hero section, or a Cover block. Those areas can have different proportions and dimensions, even on the same site. A wide banner, for example, needs a different composition from a tall mobile hero. The image’s visible crop also changes with the area’s shape and the selected fit mode.
WordPress documentation does not establish one general recommended pixel dimension for all backgrounds. Instead of treating a familiar image size as a rule, start with the element that will receive the background and the largest display area it needs to cover. Choose an image with enough pixels for that use, then check how the actual theme and layout render it.
Do not mistake WordPress-generated image sizes for background recommendations. WordPress Developer Resources describes a default 768-pixel width for the medium_large responsive-image size and a default maximum width of 2048 pixels for images included in srcset lists. Those figures concern responsive image markup, not the dimensions a background file should have.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Choose the image and fit mode for the area
Start with the container
- Identify the exact recipient of the background: a page-wide setting, a particular section, or a Cover block.
- Determine the area’s expected proportions at the largest desktop display and at the narrowest mobile width you need to support.
- Prepare an image with enough pixels for the largest intended display. Keep the main subject and any essential visual details away from edges likely to disappear in a crop.
- Preview the real page at wide and narrow widths, adjusting the image position or focal point until the important subject remains visible.
A specific pixel dimension is useful only when tied to a measured container, a theme’s guidance, or a design specification. If you give an example size for a particular hero design, label it as an example for that design—not as an official WordPress-wide recommendation.
#1 Best Overall
Use Cover when filling the area matters most
WordPress.org explains that with Cover, “The image is resized to cover the entire block area.” If the image and the block have different shapes, filling the block means part of the image may fall outside the visible crop. This is often appropriate for a decorative hero background, provided the subject survives that crop.
Use the focal-point or position control, where available, to tell WordPress which part of the image should remain prominent. A subject centered for a desktop crop may shift out of view on a tall phone display, so check more than one viewport shape instead of relying on a single preview.
Use Contain when the complete image must show
Contain preserves the complete image rather than cropping it to fill the area. When the image proportions do not match the container, the remaining space may show through as empty space or the area’s background color. Choose it when seeing the whole graphic matters more than edge-to-edge coverage.
Use Tile only when repetition is intentional
Tile repeats the image. That can suit a pattern designed to repeat, but is usually not appropriate for a photograph or an illustration with a single focal subject.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
| Setting | What it prioritizes | What to check |
|---|---|---|
| Cover | Filling the area | Whether the crop cuts off the subject at any viewport |
| Contain | Showing the entire image | Whether the space around the image is acceptable |
| Tile | Repeating the image | Whether the repeated pattern looks intentional |
Where to set a background in WordPress
The available controls depend on the theme, the block or area being edited, and the WordPress version. A setting documented for one editor or theme should not be assumed to exist in every installation.
Block editor and Cover block
For a Cover block, select the block and use its image and focal-point controls in the editor. The Image block documentation notes that Cover can crop an image and that the focal point is useful when Cover is selected. An aspect-ratio adjustment can change how an image displays without changing the original file. Inspect the result on the page at multiple widths; editor controls do not remove the need to check the theme’s actual layout.
Site-wide background in WordPress 6.6
WordPress 6.6 documented site-wide background-image settings in theme.json under styles.background, including properties such as backgroundSize and backgroundPosition. The WordPress project described the corresponding editor controls under Styles > Layout for WordPress 6.6. Whether these options appear or work in a particular site depends on its theme and setup.
Classic themes and custom backgrounds
Classic themes can support the Custom Background feature by declaring add_theme_support( 'custom-background' ). The documented output uses CSS background properties; example defaults include automatic sizing and repeating behavior. That is a theme feature, not a universal setting applied identically to every WordPress site. If the control is missing, check the theme’s documentation or ask the theme developer before assuming WordPress itself is broken.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Backgrounds versus responsive image blocks
WordPress documents srcset and sizes for responsive image markup. That mechanism allows the browser to choose among image sources represented in the markup. The WordPress documentation reviewed here does not establish that a CSS background automatically receives the same responsive source selection. Do not assume that choosing a large background file gives a background the same source-switching behavior as an inline Image block.
If a graphic contains information readers need, consider using an ordinary image element with suitable text alternatives, or provide the information in nearby text. A CSS background is often best reserved for decoration. That is general accessibility guidance; the correct treatment depends on the content and how the image is used.
Preview the crop on the actual page
Check the live layout, not just the source file or a single editor view. Resize the browser to inspect a wide desktop shape and a narrow mobile shape, and check any intermediate layout where the subject could shift or disappear. If the site uses different backgrounds or section heights at different breakpoints, inspect each relevant state.
A saved screenshot can make visual comparisons easier when you adjust the source image, focal point, or section dimensions. Capture the page at the same viewport each time so you compare like with like. For a browser-based check, use your browser’s responsive design tools and take a screenshot after the page has finished rendering.
Or skip the browser setup
ScreenshotNeo can capture a page with one request, which is useful when you want a repeatable screenshot to review a background crop. Cookie banners, popups and chat widgets are removed before the shot; bot checks, blank pages and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. See ScreenshotNeo and the API documentation.
For example, this cURL request saves a screenshot of the page as WebP:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpReplace YOUR_API_KEY with your API key and change the target URL to the page you want to inspect. Sign up free for 1,000 screenshots a month with no card.
Common background image problems and fixes
The image is cropped too much
This is expected when Cover fills a container whose proportions differ from the source image. Reposition the focal point, keep the subject farther from the edges in the source, or choose Contain if showing the entire image matters more than filling the area.
The whole image is visible, but there is empty space
That is a likely result of Contain when image and container shapes differ. If edge-to-edge coverage is more important, try Cover and inspect its crop. If the image must remain intact, accept the surrounding space or use an inline image instead of a background.
The background looks wrong on mobile
The mobile container has a different shape from the desktop container, so the crop or empty space changes. Recheck the focal point at narrow widths and adjust the image composition or layout. Do not choose dimensions solely from a desktop preview.
The background control is missing
Controls vary by theme, editor context, and WordPress version. Confirm that you selected the intended block or area, then check whether the active theme supports the relevant background feature. Classic themes may need custom-background support; site-wide controls documented for WordPress 6.6 depend on the theme and setup.
Recommended Free Tools
The background looks soft or pixelated
Check the source file’s pixel dimensions against the size at which the background is displayed, and make sure the file itself is not already blurred or compressed. A setting such as Cover can enlarge an image to fill an area; providing a source with adequate pixels for the intended display can help, but there is no universal dimension that guarantees sharpness on every theme and screen.
Quick decision checklist
- Identify the specific page area or block that receives the background.
- Use Cover when filling the area matters and the crop is acceptable.
- Use Contain when the complete image must remain visible; allow for possible empty space.
- Use Tile only for artwork or textures meant to repeat.
- Set and test the focal point with both desktop and mobile proportions in mind.
- Do not treat WordPress responsive-image defaults as background recommendations.
- If the image communicates essential information, make that information available in text or an appropriately accessible foreground image.
Frequently Asked Questions
Does WordPress recommend a background image resolution?
No universal background-image resolution is established in the WordPress documentation described here; the suitable source depends on the area, crop, and intended display.
Can a background image be the same size on desktop and mobile?
It can be the same source file, but the displayed crop and scale can differ because the container proportions change. Test both layouts before settling on the image and focal point.
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.
