Free tools Windows power users keep installed
One-click scans. No signup required.
Scroll the element that paints the CSS background into view, then wait for a signal tied to that specific image before taking the screenshot. A successful page.goto() or the page’s load event does not guarantee that a lazy-loaded background has arrived.
Why a Playwright screenshot can miss a CSS background
Lazy loading postpones a resource until a condition—often the element entering or approaching the viewport—occurs. A site may use an IntersectionObserver or its own JavaScript to apply the background only after that trigger. If the element is still offscreen, waiting for navigation to finish may capture an empty area.
Playwright navigation supports commit, domcontentloaded, load, and networkidle; load is the default. These describe page/navigation states, not proof that a particular deferred background image is ready. The official Playwright Page API discourages using networkidle as a test-readiness strategy: it means there have been no network connections for at least 500 ms, but that does not establish that the target image was requested or painted.
Capture the background with a target-specific wait
Replace the selector and expected asset name below with values from the page. The example scrolls the owner element into view, waits until its computed CSS references the expected image, then captures the element.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
const hero = page.locator('.hero');
await hero.scrollIntoViewIfNeeded();
await page.waitForFunction(({ selector, expected }) => {
const el = document.querySelector(selector);
return el && getComputedStyle(el).backgroundImage.includes(expected);
}, { selector: '.hero', expected: 'hero-image.webp' });
await hero.screenshot({ path: 'hero.png' });This is an adaptable template, not a site-independent guarantee. A computed-style match establishes that the style contains the URL; it does not prove the image finished loading or decoded into pixels. If the site exposes a loaded class or other application state only after successful image loading, assert that state too. When it does not, use a resource-aware check for the URL’s request and completion rather than treating the CSS string alone as readiness.
Adapt the trigger to the page
- If entering the viewport triggers loading,
scrollIntoViewIfNeeded()is a suitable way to reproduce it. - If the page applies the background through a custom interaction or condition, reproduce that behavior instead of assuming scrolling is sufficient.
- If the background is already in CSS but the image request is still in progress, wait for the app’s loaded state or a check tied to that resource before capturing.
Choose the screenshot scope
Once the intended image is ready, choose the capture method according to the artifact you need:
| Goal | Playwright call | What it captures |
|---|---|---|
| Just the background component | await page.locator('.hero').screenshot({ path: 'hero.png' }); |
The selected element |
| The visible page area | await page.screenshot({ path: 'page.png' }); |
The current viewport by default |
| The whole scrollable page | await page.screenshot({ path: 'full.png', fullPage: true }); |
The full page |
A full-page screenshot changes the capture scope; it does not by itself prove that an offscreen lazy background was triggered and loaded. The official Playwright screenshots guide documents page and locator screenshots.
Make visual-regression captures stable
For Playwright Test visual comparisons, expect(page).toHaveScreenshot() waits for consecutive screenshots to stabilize before comparing them. That helps with visual repeatability, but it is not a general-purpose detector that a particular remote background image loaded. First establish the target’s readiness, then use screenshot stabilization when the goal is a visual regression assertion. See the Playwright visual comparisons documentation.
A fixed sleep may work on one run and fail on a slower or faster response. Prefer an assertion for the actual state the test needs; Playwright’s Page API explicitly recommends readiness assertions rather than networkidle.
Troubleshoot a missing background
- The screenshot is blank, but navigation succeeded: Navigation completion does not establish that a lazy resource loaded. Scroll the background-owning element into view or reproduce the page’s actual trigger, then wait for image-specific readiness.
- The computed style contains the URL, but the capture is still blank: The style can be set before the resource finishes loading or paints. Add a site-specific loaded-state assertion or a check tied to request completion.
- Scrolling does not start the request: The site may use a trigger other than viewport entry, or the selector may identify the wrong element. Inspect the page’s behavior and target the element whose CSS paints the background.
networkidletimes out or never arrives: Other ongoing network activity can prevent an idle window; conversely, an idle window can happen before the deferred image is requested. Replace it as the image-readiness condition with a target-specific assertion.- The component screenshot omits the expected area: Check that the locator selects the actual background owner. Use
page.screenshot()for the viewport orfullPage: truewhen the desired output is page-wide.
Or skip the browser setup
If you need a screenshot artifact rather than a Playwright test, ScreenshotNeo provides a website screenshot API. Its one-request cURL example is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for the request options. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.
Sign up free for 1,000 screenshots a month—no card required.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Frequently Asked Questions
Can I use HTMLImageElement.complete for a CSS background?
No. That property belongs to an <img> element; a CSS background’s owning element is not an image element. Use an application readiness signal or a check associated with the background resource.
Does fullPage: true trigger every lazy-loaded background?
Not reliably. It sets the capture area to the full scrollable page; trigger the target site’s lazy-loading behavior and verify the image before capturing.
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.
