How to Use a Screenshot as a Website Background with CSS

Use background-image on the element that should display the screenshot, then choose how it scales with background-size. Use cover to fill the box (with possible cropping), contain to keep the complete screenshot visible (with possible empty space), and a background-color fallback for failed or delayed image loads.

.hero {
  min-height: 24rem;
  background-color: #222;
  background-image: url('/images/screenshot.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

In the example, the hero gets its height from min-height. Without a height supplied by content or layout, a background image does not create space by itself. The CSS properties used here are documented by MDN’s background-image reference and its background-size reference.

1. Build a complete hero background

<section class='hero'>
  <div class='hero__content'>
    <p class='eyebrow'>Product preview</p>
    <h1>Ship a clearer landing page</h1>
    <p>The text remains real HTML while the screenshot supplies visual context.</p>
    <a class='button' href='/signup'>Start now</a>
  </div>
</section>

.hero {
  min-height: 30rem;
  display: grid;
  place-items: center;
  padding: 4rem 1.5rem;
  color: #fff;
  background-color: #1d2433;
  background-image: url('/images/product-screen.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero__content {
  width: min(100%, 42rem);
  text-align: center;
  text-shadow: 0 1px 2px rgb(0 0 0 / 45%);
}

.button {
  display: inline-block;
  padding: .75rem 1rem;
  color: #111;
  background: #fff;
  border-radius: .4rem;
  text-decoration: none;
}

Keep headings, paragraphs, controls, and other meaningful information in HTML. A CSS background is visual decoration and is not announced by screen readers. If the screenshot itself communicates information that users need, provide an equivalent semantic description or content in the document.

2. Choose cover, contain, or explicit sizing

Value	What it does	Use it when	Trade-off
cover	Scales proportionally until both box dimensions are covered.	The area must be fully filled, such as a hero or banner.	Parts of the screenshot can be cropped.
contain	Scales proportionally so the entire image fits inside the box.	Every edge of a screenshot must remain visible.	Empty bands can remain; disable repetition.
auto or lengths	Uses the intrinsic size or a specified dimension.	You need a known width or height.	Two explicit dimensions can distort the image.

/* Fill the panel; crop edges when aspect ratios differ */
.cover-panel {
  min-height: 20rem;
  background: #20242b url('/images/screenshot.png') center / cover no-repeat;
}

/* Show the entire screenshot inside the panel */
.contain-panel {
  min-height: 20rem;
  background-color: #20242b;
  background-image: url('/images/screenshot.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Deliberately size the background */
.fixed-size {
  min-height: 18rem;
  background-image: url('/images/screenshot.png');
  background-size: 48rem auto;
  background-position: center top;
  background-repeat: no-repeat;
}

How cropping works

cover preserves the screenshot’s aspect ratio. If the element is wider than the image, the image is scaled until its width is covered and the top or bottom may be cropped. If the element is taller, the sides may be cropped. This is why a screenshot that looks correct on desktop can hide its subject on a narrow phone.

3. Control the visible focal point

Set background-position to keep the important part of the screenshot in view. Keywords include left, center, and right, with optional vertical values such as top or bottom. Percentages provide finer control.

.dashboard-hero {
  min-height: 26rem;
  background: #111 url('/images/dashboard.png') 72% 20% / cover no-repeat;
}

@media (max-width:  fortyrem) {
  .dashboard-hero {
    background-position: 68% top;
  }
}

Replace the example focal point with values appropriate for your image. Inspect the result at each breakpoint because the crop changes as the element’s aspect ratio changes.

4. Make the background responsive

.hero {
  min-height: clamp(22rem, 70vw, 40rem);
  padding: clamp(2rem, 8vw, 6rem) 1rem;
  background-color: #263044;
  background-image: url('/images/landing-page.webp');
  background-size: cover;
  background-position: 65% center;
  background-repeat: no-repeat;
}

@media (max-width:  fortyrem) {
  .hero {
    min-height: 32rem;
    background-position: 58% center;
  }
}

Use a separate mobile asset when the composition cannot survive cropping. The CSS image-set function can let supporting browsers choose a resolution, while the first URL remains a fallback:

.hero {
  background-image: image-set(
    url('/images/hero.webp') type('image/webp') 1x,
    url('/images/hero@2x.webp') type('image/webp') 2x
  );
}

5. Add overlays without editing the screenshot

Text often needs a contrast layer over a detailed screenshot. A pseudo-element keeps the overlay separate from the image:

.hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: #20242b url('/images/screenshot.png') center / cover no-repeat;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(0 0 0 / 70%), rgb(0 0 0 / 15%));
}

.hero__content {
  position: relative;
}

Check text contrast across the whole text region. The WCAG thresholds reported by MDN are 4.5:1 for normal body text and 3:1 for large text (at least 24px, or bold text around 18.66px and above). Measure the actual rendered combination; a dark overlay that works in one crop may not work in another.

6. Use layered backgrounds for gradients and texture

.card {
  min-height: 22rem;
  background:
    linear-gradient(rgb(12 18 30 / 65%), rgb(12 18 30 / 20%)),
    url('/images/screenshot.png') center / cover no-repeat;
}

Background layers are listed from front to back. Give each layer its own position and size when needed:

.card {
  background-image: linear-gradient(#0008, #0002), url('/images/screenshot.png');
  background-position: center, 70% 30%;
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
}

7. Background versus an <img> element

Requirement	Prefer
Decorative visual behind content	CSS background-image
Image is the subject or conveys information	Semantic <img alt='...'>
Need intrinsic dimensions, responsive image attributes, or native lazy loading	<img> with width, height, srcset, and sizes
Need multiple visual layers or an overlay	CSS backgrounds, pseudo-elements, or both

Background images have no alternate text. If removing the background would remove essential meaning, put that meaning in HTML and use the background as supporting art.

8. Create the screenshot with ScreenshotNeo

If you need a current webpage capture to use as the background, ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one GET request. Its capture options include full-page shots with lazy images loaded, element capture by CSS selector, device presets or custom viewports, dark mode, retina scale, custom CSS and JavaScript, waits, blocked resource types, headers, cookies, user agents, timezone and geolocation, resizing, and a selectable cache TTL. See the ScreenshotNeo API documentation for parameter names and response details.

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,
)
r.raise_for_status()
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}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

Or skip the browser setup

ScreenshotNeo accepts cookie and 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 response headers identify the page verdict and billing result. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots each month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

9. Troubleshooting

Symptom	Likely cause	Fix
No image appears	The URL is wrong, the request is blocked, or the image failed to load.	Open the image URL directly, inspect the network panel, keep a solid background-color, and verify the server returns an image content type.
The section has no height	Backgrounds do not contribute intrinsic layout height.	Set min-height, height, padding, or give the content normal flow space.
Important content is cut off	cover is cropping because aspect ratios differ.	Change background-position, use contain, alter the box ratio, or supply a mobile-specific asset.
Image repeats in a small tile	The default repeat behavior is visible.	Set background-repeat: no-repeat.
Image looks stretched	Two explicit background dimensions changed its ratio.	Use cover, contain, or set one dimension and leave the other auto.
Text is hard to read	The screenshot has bright or busy areas behind the text.	Add a gradient overlay, reposition the focal point, or move text into a solid panel; verify contrast at each breakpoint.
Screenshot contains a consent banner	The source page was captured before its banner was handled.	Use ScreenshotNeo’s consent handling, or automate the banner interaction before saving your own asset.
Capture returns a blank page or bot check	The target site blocked automation or failed to render.	Inspect the page verdict and X-Billed headers; adjust waits, headers, user agent, or target URL. ScreenshotNeo does not bill these failed captures.

10. Performance and reliability checklist

• Prefer WebP or AVIF where your browser support policy allows it; keep a fallback format when necessary.
• Resize the source to the largest display size you actually need. A huge screenshot increases transfer and decode work.
• Use a stable cache URL for static assets and set long-lived caching headers when you control the server.
• Keep the fallback color close to the dominant image color so loading and failure states are less jarring.
• Do not rely on a background for essential content, interaction, or accessible name computation.
• Test narrow, wide, tall, zoomed, and high-contrast presentations. Cropping and contrast change with the box dimensions.
• For generated captures, choose a cache TTL that matches how often the source changes. Bulk capture and async jobs with signed webhooks are available when many URLs or long-running renders are involved.

11. FAQ

Can I make the whole page a screenshot background?

Yes. Apply the background to body or a page wrapper, set a fallback color, and choose whether the viewport should be filled with cover or the full image should remain visible with contain. A semantic page structure should still contain the actual text and controls.

How do I stop a background from shrinking on mobile?

Use background-size: cover and give the mobile layout a deliberate height or aspect ratio. Adjust background-position at a media query when the focal subject moves.

How do I show the entire screenshot?

Use background-size: contain with background-repeat: no-repeat and a background color for the remaining space.

Can CSS backgrounds have transparent pixels?

Yes. Transparent areas reveal the element’s background color or layers behind them. Set an explicit fallback color so the result is predictable while the image loads.

Should I use a screenshot as a background for readable text?

Only when the text also exists as semantic HTML and remains readable at every crop. For an image that is itself meaningful, an <img> with useful alternative text is usually the clearer structure.