Background image

flexible

Full-width background

2560

2560×1400 Horizontal format ~16:9

This is a background image that spans the full width. Use 2560×1400, weighing under 400 KB, so it looks right and loads fast.

This size is flexible: what matters is the shape (the ratio), not the exact number.

Drop an image here

or pick a file to compare it with this size

Compress for this size

See this photo everywhere

For whoever builds the site

2560×1400 (Shopify) or up to 2500 px wide (Squarespace warns more causes mobile issues). Watch out in Webflow: it does NOT generate responsive variants for CSS backgrounds, optimize them by hand.

Ratio: ~16:9
Desktop: 2560×1400
Range: max 2500px (Squarespace)
Target weight: <400 KB
Format: WebP

<picture>
  <source type="image/webp"
    srcset="/images/background-1280.webp 1280w,
            /images/background-2560.webp 2560w"
    sizes="(max-width: 768px) 100vw, 1280px">
  <img
    src="/images/background-1280.jpg"
    srcset="/images/background-1280.jpg 1280w,
            /images/background-2560.jpg 2560w"
    sizes="(max-width: 768px) 100vw, 1280px"
    width="2560" height="1440"
    loading="lazy" decoding="async"
    alt="">
</picture>

Official docs: Webflow Help (opens in a new tab) Guides: Shopify (opens in a new tab)