Recommended Free Tools
There is no single Shopify-wide background-image size. The right dimensions depend on your theme and theme version, the section’s geometry, desktop and mobile aspect ratios, crop or focal-point controls, and whether the image is a critical above-the-fold element. For a full-width responsive hero, Shopify’s current developer example uses image sources at 600, 900, 1200 and 1600 pixels wide with sizes: '100vw'. Treat those as responsive source widths—not a mandatory single upload size.
What size should a Shopify background image be?
Start by identifying the section that will display the image. A full-viewport hero, a content-column banner and a decorative background have different rendered widths. Shopify Help Center guidance says that available settings, focal-point support and useful dimensions all depend on the theme and theme version. Consequently, a dimension that works in one theme can crop badly in another.
Export a high-quality master large enough for the widest intended display, then let responsive markup deliver an appropriate variant. For a full-width hero, Shopify’s official example uses 600 px, 900 px, 1200 px and 1600 px source widths together with sizes="100vw". These values form a practical starting ladder; they are not a universal Shopify prescription.
Use the section’s rendered geometry
- Full-width section: begin with the 600/900/1200/1600-pixel source ladder and
sizes="100vw". - Max-width container: size the largest source for the container’s maximum rendered width rather than the entire viewport, and adjust
sizesto describe that layout. - Fixed or adaptive-height banner: inspect the theme’s height rules and crop mode before choosing an aspect ratio.
- Decorative background: optimize for the actual section dimensions and loading priority instead of uploading an unnecessarily huge file.
Desktop and mobile often need different crops
A wide desktop composition may become unusable when the same image is center-cropped into a narrow phone banner. Keep headlines, logos and important subjects inside a central safe area only when one composition must serve every breakpoint. If the mobile design needs a different aspect ratio or subject placement, use art direction rather than forcing one crop.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Use a <picture> source for art direction
Shopify identifies hero banners as a common case for a desktop landscape source and a mobile portrait or tighter crop. A simplified Liquid pattern is:
<picture>
<source media="(max-width: 749px)" srcset="{{ section.settings.mobile_image | image_url: width: 900 }}">
<img
src="{{ section.settings.desktop_image | image_url: width: 1600 }}"
srcset="{{ section.settings.desktop_image | image_url: width: 600 }} 600w,
{{ section.settings.desktop_image | image_url: width: 900 }} 900w,
{{ section.settings.desktop_image | image_url: width: 1200 }} 1200w,
{{ section.settings.desktop_image | image_url: width: 1600 }} 1600w"
sizes="100vw"
width="1600"
height="900"
alt=""
>
</picture>Set the width and height to the intrinsic ratio of the source you actually use. If your theme’s section editor already generates responsive image markup, use its settings instead of duplicating this pattern.
Background image or responsive <img>?
For an above-the-fold hero that is likely to become the page’s Largest Contentful Paint (LCP) element, use a responsive <img> rather than CSS background-image. Shopify explains that a CSS background is discovered only after HTML parsing, CSS download and CSS parsing. An image element can be discovered earlier by the browser’s preload scanner.
#1 Best Overall
Why the markup matters
srcsetgives the browser multiple source widths.sizestells the browser how wide the image will render at each viewport.widthandheightreserve space and reduce layout shift.- An appropriate fetch priority can help an important hero, while below-the-fold images should not compete with the first screen.
Use CSS backgrounds for genuinely decorative or non-LCP imagery when their layering behavior is useful. Do not use a background merely because the image sits behind text; an image element can still be positioned with CSS.
A practical Shopify sizing workflow
- Open the theme editor. Record the section’s desktop and mobile height, image-fit mode, focal-point controls and any maximum content width. Also check the documentation for that theme version.
- Measure the real layout. Determine whether the image spans the viewport or a constrained container. Note the narrowest breakpoint where the crop changes.
- Create the master artwork. Keep the important subject and text in a safe area, and export enough detail for the largest intended render. Do not assume the master itself is the only file the browser will download.
- Build the responsive ladder. For a full-width hero, start at 600, 900, 1200 and 1600 pixels wide with
sizes="100vw". Add or remove widths when your layout has a known maximum or unusually large desktop viewport. - Add a mobile source when composition changes. Use the theme’s mobile-image setting or a
<picture>source. A separate crop is preferable to shrinking a desktop subject until it disappears. - Implement LCP content as an image element. Include
srcset,sizes, dimensions and appropriate loading priority. Reserve CSS backgrounds for decorative cases. - Test actual breakpoints. Check a large desktop, a laptop, a tablet and narrow and wide phones. Verify that text remains readable, the focal subject is visible and the section does not create unexpected layout shift.
Aspect-ratio planning for common sections
| Section situation | Planning approach | What to verify |
|---|---|---|
| Full-width desktop hero | Responsive widths around 600/900/1200/1600 px; sizes="100vw" |
Desktop crop, text safe area and maximum section height |
| Mobile hero with a different composition | Separate mobile source or art-directed crop | Portrait framing, subject visibility and headline contrast |
| Max-width content banner | Largest source based on container width, not viewport width | Correct sizes value and behavior at the container’s edges |
| Decorative or below-the-fold background | Use the smallest source that preserves the intended rendered detail | Lazy-loading behavior and whether it affects layout or LCP |
Why a Shopify banner is cropped on mobile
The section has a fixed height
A fixed-height banner with object-fit: cover (or an equivalent theme crop) must remove part of the source when the aspect ratio changes. Reduce the mobile height, choose a mobile crop or switch to a ratio that preserves the subject.
The focal point is unsupported or misplaced
Some themes expose focal-point controls; others do not, and behavior can differ by theme version. If a focal-point control exists, move it toward the subject and retest every breakpoint. If it does not, prepare a dedicated mobile image.
Rank #2
Text is embedded in the artwork
Text baked into a desktop image is vulnerable to cropping and becomes too small on phones. Put critical copy in the theme’s text layer or create a mobile composition with readable type.
The image is wider than the section really is
A source sized for the viewport can be wasteful or misleading when the section is inside a constrained container. Match the source ladder and sizes declaration to the actual container.
Performance, reliability and file-size decisions
- Do not chase one universal byte target. Shopify’s official guidance here is responsive and theme-dependent; no universal hero pixel dimension or byte-size target applies to every store.
- Deliver the smallest adequate candidate. Accurate
sizesvalues prevent the browser from selecting a larger source than the layout needs. - Protect the first viewport. A hero that is LCP content should be discoverable in HTML. Avoid making it depend on late JavaScript or a CSS-only background.
- Keep dimensions stable. Width and height (or an equivalent aspect-ratio reservation) reduce cumulative layout shift while the image loads.
- Check quality after resizing. Fine text, product edges and gradients reveal over-aggressive compression; photographic backgrounds usually tolerate more compression than screenshots or illustrations.
Or skip the browser setup
If you need to inspect how a Shopify storefront actually crops at different viewports, ScreenshotNeo can capture the rendered page without building your own browser automation. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the page verdict and billing result in X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
One GET request returns a PNG, JPEG, WebP or PDF. See the ScreenshotNeo API documentation for all options, including viewport and device presets, full-page capture, element selectors, dark mode, custom CSS and JavaScript, waits, cookies, headers, geolocation, resizing, caching, signed links, asynchronous jobs and bulk capture.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://your-shop.myshopify.com -o shopify.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://your-shop.myshopify.com"}, timeout=90)
open("shopify.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://your-shop.myshopify.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan, and yearly billing provides two months free. Create a free ScreenshotNeo account to check your storefront crops.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting checklist
The desktop image looks soft
Confirm that the browser is selecting the 1200- or 1600-pixel candidate when the section is wide. Check the rendered width and the sizes value; an incorrect declaration can select a source that is too small.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →The phone downloads a huge desktop file
Inspect the mobile candidate and srcset. Add a mobile source or a smaller width, and ensure the media condition or sizes value matches the actual layout.
Best Value
The hero shifts the page while loading
Add accurate width and height attributes or reserve the image’s aspect ratio. Avoid changing section height after the image arrives.
A consent banner covers the screenshot
For a manual test, accept or dismiss the banner before capturing. With ScreenshotNeo, consent handling and removal of supported popups occur before the shot, and the response indicates whether the page was billable.
FAQ
Does Shopify require a 1920 × 1080 background?
No. Shopify does not publish one universal background dimension. Theme geometry and theme version determine the useful dimensions.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Should I upload separate desktop and mobile files?
Only when the mobile composition needs a different crop or aspect ratio. Otherwise, one responsive source can work if the safe area survives every breakpoint.
Can I use CSS background-image for a hero?
You can, but Shopify recommends an image element for hero and LCP content so the browser can discover it earlier.
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.
