The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Set omitBackground: true in Puppeteer’s page.screenshot() options and save the result as a PNG. This hides Chromium’s default white background; it does not remove a background color or image that the page itself paints.
Capture a transparent PNG
Here is a minimal example for a page you can access. Puppeteer’s ScreenshotOptions reference, version 25.12.0, documents omitBackground as a boolean that defaults to false and allows transparency by hiding the default white background. PNG is the documented default, so the explicit type is optional when saving to a .png path. See the ScreenshotOptions reference.
As an Amazon Associate I earn from qualifying purchases.
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle0' });
await page.screenshot({
path: 'page.png',
type: 'png',
omitBackground: true,
});
} finally {
await browser.close();
}Replace the example URL with the page to capture. The finally block closes the browser even if navigation or capture fails. Puppeteer’s guide covers page screenshots and their options: Screenshots.
Choose the capture area
Capture the visible viewport
The first example captures the current viewport. Set its dimensions before navigation or capture if you need a particular layout:
#1 Best Overall
await page.setViewport({ width: 1280, height: 800 });Capture the full document
Add fullPage: true to capture the full page rather than only the viewport. The output can be much taller than a normal viewport, so consider image dimensions and memory use for long pages.
await page.screenshot({
path: 'page-full.png',
fullPage: true,
omitBackground: true,
});Capture one element
Wait for the target, then call screenshot() on the returned element handle:
Rank #2
const element = await page.waitForSelector('.target');
if (!element) throw new Error('Target element was not found');
await element.screenshot({
path: 'element.png',
omitBackground: true,
});Puppeteer’s ElementHandle.screenshot() reference notes that it scrolls an element into view if needed and throws if the element has been detached from the DOM. If the selector does not match, the wait can time out; use a selector appropriate to the page and make sure the element exists before capturing.
Why the PNG may still look opaque
omitBackground hides the browser’s default white backdrop. It is not a command to erase the page’s own CSS. A body, container, or target element with an authored background color or image can still appear opaque in the screenshot.
- Inspect the element and its ancestors for CSS
backgroundorbackground-colorrules. - If you control the page and want transparency, remove or override only the relevant background styles before capturing.
- If you do not control the page, expect its authored backgrounds to remain; the Puppeteer option does not promise to strip them.
For a page you control, a temporary override can be applied before capture, but use it only if removing those styles is appropriate for the desired image:
await page.addStyleTag({
content: 'html, body { background: transparent !important; }',
});That override targets html and body only. Other elements may paint their own backgrounds, so inspect the specific target if it remains opaque.
Save to a file or use the returned image data
Providing path writes the screenshot to a file, with the image type inferred from its extension. Without a path, page.screenshot() returns a Uint8Array by default; the API can also return a base64 string when the corresponding encoding option is requested. See Page.screenshot().
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 & 11const pngBytes = await page.screenshot({ omitBackground: true });
// pngBytes is a Uint8Array by default.PNG is the suitable output for preserving transparency. JPEG quality is not applicable to PNG; choosing a format that does not support transparency will not preserve the transparent background.
Best Value
- Used Book in Good Condition
Troubleshooting
- The output still has a white area: Check whether the page or target element explicitly paints a white background.
omitBackgroundonly hides the browser’s default background. - The target selector times out: Confirm the selector matches the live DOM and that the page has reached the state where the element appears. Wait for the specific selector rather than relying only on a fixed delay.
- Element capture reports a detached element: The page may have replaced or removed the node after it was selected. Wait for the final element state, reacquire the handle, and capture it before the page changes it.
- The output is not transparent: Save as PNG and ensure
omitBackground: trueis set on the screenshot call. Also check the page’s own CSS backgrounds. - The screenshot is unexpectedly large or slow: A full-page capture can include a very tall document. Capture only the viewport or a specific element when that meets your need.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Its API returns PNG, JPEG, WebP, or PDF captures. For a transparent PNG, request PNG output and use its documented transparent-background option; the one-call example below shows the basic request shape. See the ScreenshotNeo API documentation for the supported parameters.
curl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://stripe.com
-o shot.webpFor this Puppeteer task, keep the output extension and requested format aligned with the transparency requirement, and consult the documentation for the exact format and transparency parameters. ScreenshotNeo accepts and removes cookie/consent banners, newsletter popups, and chat widgets before capture; each of these steps can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Frequently Asked Questions
Does omitBackground remove the website’s CSS background?
No. It hides the browser’s default white background; page-authored backgrounds may remain.
Can I capture just one element with transparency?
Yes. Use the element handle’s screenshot() method and set omitBackground: true.
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.
