Scroll the live page through the sections that load their CSS backgrounds, wait for the site’s loading logic and image requests to finish, then take a full-page screenshot. A full-page setting captures the page’s scrollable extent; it does not necessarily trigger code that only assigns an image when its element enters the viewport.
Why a full-page screenshot can miss a background image
Many pages defer noncritical resources until they are needed. For CSS backgrounds, a site may use JavaScript—often an IntersectionObserver callback—to add a class or set background-image when a section approaches the viewport. If the capture happens before that section intersects the relevant viewport or scroll container, the background may never be assigned.
Full-page capture and lazy-content activation are separate operations. Playwright’s fullPage: true controls the screenshot’s extent; it should not be treated as a guarantee that the browser scrolled through the page first. The browser’s load event is not a sufficient readiness signal either: lazy-loaded content may still be pending after it fires. See Playwright’s screenshot documentation and MDN’s lazy-loading overview.
Scroll the page before capturing it with Playwright
After navigating to the target page, scroll in steps smaller than the viewport, allow rendering and site code to run between steps, return to the top, and then capture. This runnable Node.js example uses Playwright’s library package:
#1 Best Overall
- 【1080P HD High Quality】Capture resolution up to 1080p for video source and it is ideal for all HDMI devices such as PS4, PS3, Xbox One, Xbox 360, Wii U, DVDs, DSLR, Camera, Security Camera and set top box. Note: Video input supports 4K30/60Hz and 1080p120/144Hz. Does not support 4K120Hz/144Hz. Output supports up to 2K30Hz.
- 【Plug and Play】No driver or external power supply required, true PnP. Once plugged in, the device is identified automatically as a webcam. Detect input and adjust output automatically. Won't occupy CPU, optional audio capture. No freeze with correct setting.
- 【Compatible with Multiple Systems】suitable for Windows and Mac OS. High speed USB 3.0 technology and superior low latency technology makes it easier for you to transmit live streaming to Twitch, Youtube, Facebook, Twitter, OBS, Potplayer and VLC.
- 【HDMI LOOP-OUT】Based on the high-speed USB 3.0 technology, it can capture one single channel HD HDMI video signal. There is no delay when you are playing game live.
- 【Support Mic-in for Commentary】Rybozen capture card has microphone input and you can use it to add external commentary when playing a game. Please note: it only accepts 3.5mm TRS standard microphone headset.
-
Install Playwright and its Chromium browser in your project with
npm install playwrightandnpx playwright install chromium. -
Save the following as
capture.mjs:
import { chromium } from 'playwright';
const url = process.argv[2];
if (!url) throw new Error('Usage: node capture.mjs https://example.com');
const browser = await chromium.launch();
const page = await browser.newPage();
try {
await page.goto(url, { waitUntil: 'domcontentloaded' });
await page.evaluate(async () => {
const step = Math.max(300, Math.floor(window.innerHeight * 0.8));
let previousHeight = 0;
let y = 0;
// Recheck height as the page may grow while scrolling.
while (true) {
const height = Math.max(
document.documentElement.scrollHeight,
document.body.scrollHeight
);
if (y >= height || (height === previousHeight && y >= height - step)) break;
previousHeight = height;
window.scrollTo(0, y);
await new Promise(resolve => requestAnimationFrame(() =>
requestAnimationFrame(resolve)
));
await new Promise(resolve => setTimeout(resolve, 150));
y += step;
}
window.scrollTo(0, 0);
await new Promise(resolve => requestAnimationFrame(() =>
requestAnimationFrame(resolve)
));
});
await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
await browser.close();
}-
Run it with
node capture.mjs https://example.com. It writespage.pngin the current directory.
The short delay and animation frames give the page opportunities to respond and paint; they do not prove that every image request completed. For a page with slow assets, animations, or delayed callbacks, use an application-specific ready condition or verify the expected image URLs before the screenshot.
Make the scroll match how the page loads content
CSS backgrounds and HTML lazy images are different
The loading="lazy" hint applies to HTML image loading behavior, not to a container’s CSS background. A background is a CSS background-image style, and its deferred assignment is often controlled by site code. Scrolling can trigger that code, but adding a loading attribute to the container is not a substitute.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Check the observer’s actual scroll root
IntersectionObserver detects intersection relative to its configured root. If the page places sections inside a nested, independently scrolling panel, scrolling window alone may not bring those sections into that panel’s observer root. Scroll the relevant container as well. See MDN’s IntersectionObserver reference.
Rank #2
- 【1080P 60FPS Video Capture Card】 This HDMI game capture card is based on USB3.0 high speed transmission port, input resolution up to 4K@30HZ, output resolution up to 2K@30Hz or 1920×1080@60Hz. Type c and USB interface can meet most of the devices in daily life. Easily meet the online capture, real-time recording, online meetings, live gaming and other functions, so you have a better visual enjoyment. Note: For capture use only; requires capture software to function and is not intended for direct screen casting to a monitor or TV
- 【Ultra Low Latency Screen Sharing】 HDMI capture card is made of good quality aluminum alloy with strong heat dissipation, allowing you to enjoy ultra low latency while live gaming or video recording or live streaming, avoiding blue screens and lag. This HDMI to USBC capture card supports easy recording of good quality audio or HD video and transferring it to your computer or streaming platform, allowing you to record 60 fps HD video directly on your hard drive and real-time preview
- 【Plug and Play, Easy to Carry】 This HDMI 1080P video capture card does not require any additional drivers or external power supply, just plug and play for fast capture. The capture card is small and lightweight, so you can put it in your bag for emergencies, making it very portable for outdoor live streaming. It's also a great way to share content in game recording, video conference, video recorder and online teaching
- 【Wide Compatibility USB Capture Card】 Easily streams to Facebook, Youtube or Twitch. With the connection, this HDMI to USB C/3.0 video capture devices can be working on several Operating Systems and various software: Windows 7/ 8/ 10, Mac OS or above, Linux, Android, Laptop, Xbox One, PS3/PS4/PS5, Camera, DVDs, Set Top Box, Webcame, DSLR, Switch/Switch 2, TV BOX, HDTV, Potplayer/VLC, ZOOM, OBS Studio etc.
- 【Package Content & Note】 1x HD Audio Capture Card , 1x USB 3.0 to USB C Adapter (A-side 3.0, B-side 2.0), 1x user manual. Please note that you need to restart the OBS Studio software after the audio setup is complete, otherwise it will result in no sound output. When using an adapter, if the device is recognized as USB 2.0, try using the other side with the USB-C port. Simply flip the capture card and reconnect it to be recognized as USB 3.0
Handle growing pages deliberately
Infinite-scroll pages can extend as you move down. Recheck document height during traversal, and set a sensible stopping condition such as a known target section, a maximum number of steps, or a site-ready signal. Without a stopping rule, a page that continuously adds content can make the scroll loop run indefinitely or produce an impractically large capture.
Verify that the background is ready
For a specific target, inspect its computed style before and after scrolling:
const background = await page.locator('.hero-panel').evaluate(element =>
getComputedStyle(element).backgroundImage
);
console.log(background);A value of none or a placeholder that changes to a URL after scrolling suggests the page’s deferred assignment has run. A CSS background can contain multiple comma-separated layers, so check for all expected URLs rather than assuming one image.
If the URL is present but the screenshot is still blank, check whether the image request failed or remains pending, whether the element is hidden or covered, and whether capture happened before the final paint. For a known URL, an additional check can load and decode that particular asset in an Image object; that confirms only that URL, not every layer or the full visual state of the page.
Choose a readiness strategy
| Approach | Useful when | Trade-off |
|---|---|---|
| Scroll and wait at each step | You need a practical method for a simple page without an explicit ready signal. | Easy to adapt, but fixed waits may be too short for slow assets and unnecessarily long for fast pages. |
| Wait for an application-ready condition | Your own app or test environment exposes a reliable signal, such as a known class or expected background URL. | More repeatable, but depends on a correct, page-specific condition. |
| Capture without scrolling first | You know the page does not defer the content, or only need the initially visible state. | Faster, but viewport-triggered sections may remain blank. |
These are workflow trade-offs, not measured performance comparisons. For a focused screenshot after preparing the page, Playwright can capture a locator instead of the whole scrollable page; its screenshot API also supports styling and scale options. See the Page screenshot API.
Rank #3
- 4K60 Capture: Record in cinematic quality with crisp detail and vivid colors
- HFR Support: Play and capture in 1440p120 or 1080p240
- HDR10 Support: Capture brilliant HDR content with tone mapping on Windows
- Cross-Platform Compatible: Works with PS5, Xbox Series X/S, Switch 2, and more
- Analog Audio In: Capture in-game chat or commentary with 3.5mm input
Troubleshoot missing background images
-
The image is still
noneafter scrolling: confirm that you scrolled the element into the correct viewport or nested scroll root; check whether the site requires a larger intersection threshold or a different interaction. -
The computed style has a URL, but the captured area is blank: inspect the request for failure or delay, check whether another element covers the background, and wait for the application’s actual ready state before capture.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Only some sections load: use smaller scroll steps, re-evaluate page height as it grows, and scroll inner containers that have their own observers.
-
The screenshot is intermittent: replace an arbitrary delay with an explicit condition that checks the expected class, computed URL, or app-ready signal. A pair of animation frames allows rendering to progress but is not a network-completion guarantee.
-
The loop never finishes: the page may be infinite-scrolling or continually changing height. Add a maximum step count or stop at a defined target instead of chasing an unbounded document height.
Rank #4
Sale
Capture Card 4K HDMI Video Streaming to USB 3.0 1080P 60FPS Capture Device- High-Quality Video Capture, 4K HDMI Capture Card Ready: Capture smooth and vibrant video with this 4K HDMI capture card, engineered for gamers and content creators who demand crisp 1080P 60FPS video quality. Whether you're streaming to Twitch or recording gameplay for YouTube, your footage will look professional and detailed
- Plug-and-Play USB Capture Card, No Drivers Needed: Designed as a USB capture card for streaming, this device works instantly out of the box, just plug into your PC or laptop and start capturing. Fully compatible with popular software like OBS Studio, Streamlabs, and XSplit, making setup quick and stress-free for beginners and pros alike
- Universal Compatibility PS5, Xbox, Switch & More: Stream or record gameplay from virtually any HDMI-enabled device including Nintendo Switch, PS5, Xbox Series X, DSLR cameras, and PCs. The video capture card for gaming supports seamless passthrough so you can play without lag while your audience watches every frame in real time
- Low-Latency Performance for Smooth Streaming: This capture card for streaming minimizes delay between gameplay and broadcast, so you get reliable, low-latency capture that works well for competitive gaming, live broadcasts, and podcast sessions. Suitable for those building their channel with high-quality, engaging content
- Compact & Portable Design for Content Creators: Lightweight and portable, this USB 3.0 capture card works well for creators who travel or switch gaming setups often. Throw it in your bag and stream or record wherever you are, at home, events, LAN parties, streaming or studio sessions
Or skip the browser setup
ScreenshotNeo offers a one-request screenshot API. Its capture options include full-page capture with lazy images loaded, but a site-specific background trigger may still require the browser preparation described above. The service 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 or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses identify the page verdict and billing status in headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents.
PC 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 & 11Outdated 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 matchExample cURL request (replace the URL with the page you want):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Free includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for free and get 1,000 screenshots a month with no card.
Frequently Asked Questions
Does Playwright’s full-page screenshot scroll the page first?
No. The full-page option sets the capture extent; prepare the page state separately before capture.
Can adding loading=”lazy” to a section defer its CSS background?
No. That HTML hint is not the mechanism for a container’s CSS background; sites commonly defer backgrounds with JavaScript.
Is a pair of animation frames enough to know an image loaded?
No. It gives rendering a chance to progress, but does not establish network completion.
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.
