How to take a full-page screenshot of a page with sticky headers

A full-page screenshot captures content beyond the visible browser window. For a one-off capture, use Chrome DevTools’ Capture a full size screenshot or Firefox’s Take Screenshot → Save full page. For repeatable automation, use Playwright with fullPage: true. Sticky headers can cover content or appear unexpectedly in the result, so inspect the output; there is no single browser setting that guarantees the same sticky-header behavior on every page.

Choose the capture method

Goal	Method	What it captures
One-off whole-page capture in Chrome	DevTools → Device Mode → Capture a full size screenshot	The whole page, including content outside the viewport. Chrome documentation
One-off whole-page capture in Firefox	Take Screenshot → Save full page	The full page, with options to download or copy. Firefox Support
Automated or repeatable whole-page capture	Playwright page.screenshot({ fullPage: true })	The full scrollable page. Playwright documentation
Only the header or another component	Capture a node or locator	One element rather than the entire document.

Choose a full-page image when the reader needs the whole document in one file. Choose an element screenshot when the subject is only the header or another component. If content loads as you scroll, wait for it to load before deciding the capture is complete.

Capture a full page in Chrome

1. Open the target page in Chrome.
2. Open DevTools. Enable Device Mode if needed.
3. Open the screenshot menu and choose Capture a full size screenshot.
4. Open the saved image and inspect the top, middle, and bottom, especially where the sticky header overlaps content.

Chrome’s menu names and locations can change across versions. The documented Device Mode command captures the whole page, including content outside the viewport. For a single element, inspect it in DevTools and use the node screenshot command when available; Chrome documents node screenshots for full nodes, including below-the-fold content. Chrome DevTools node screenshot documentation

Capture a full page in Firefox

1. Open the page in Firefox.
2. Choose Take Screenshot from the page actions, then choose Save full page.
3. Download the image or copy it, then inspect the sticky header and page content.

If the screenshot toolbar button is unavailable in Developer Tools, open DevTools Settings and enable it under Available Toolbox Buttons. Firefox also documents the Web Console :screenshot --fullpage helper and selector captures. Firefox DevTools screenshot documentation

Automate full-page capture with Playwright

Install Playwright and its Chromium browser in a Node.js project:

npm install playwright
npx playwright install chromium

Save this as screenshot.mjs and run node screenshot.mjs https://example.com. Replace the example URL with the page you control or are authorized to capture.

import { chromium } from 'playwright';

const url = process.argv[2] ?? 'https://example.com';
const browser = await chromium.launch();
try {
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
  await page.goto(url, { waitUntil: 'networkidle', timeout: 60_000 });
  await page.screenshot({ path: 'screenshot.png', fullPage: true });
} finally {
  await browser.close();
}

Playwright’s fullPage: true captures the full scrollable page. The script uses networkidle as a convenient wait condition, but sites with persistent connections or continuing background requests may not reach it. In those cases, wait for a meaningful selector instead, or use a bounded delay when the page’s behavior is known:

await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 60_000 });
await page.locator('main').waitFor({ state: 'visible', timeout: 15_000 });
await page.screenshot({ path: 'screenshot.png', fullPage: true });

For an element-only image, use a locator screenshot:

await page.locator('header').screenshot({ path: 'header.png' });

For reproducibility, set the viewport, wait condition, and target selector deliberately. A page that changes while capture is underway can produce an image that does not match a stable browsing session.

Diagnose sticky headers that cover or repeat

Sticky and fixed elements are positioned relative to scrolling and viewport behavior. A whole-page screenshot command and a workflow that scrolls and stitches viewport images can therefore produce different results. Browser documentation describes whole-page capture but does not guarantee one universal result for sticky headers across pages or capture engines.

1. Capture once with the browser’s built-in full-page command. This gives you a baseline without assuming how the header will behave.
2. Inspect where the problem occurs. Check whether the bar covers text, repeats, disappears, or is simply present at the top as intended.
3. Inspect the header’s CSS in DevTools. Look for position: sticky or position: fixed, and check the element’s containing layout and stacking behavior.
4. For a one-off image, temporarily change the page’s CSS. You can disable the header’s positioning or hide it for the capture, then restore the original page state or reload.
5. Capture again and verify the result. Confirm that removing or changing the header has not hidden content or altered the page layout in an unwanted way.

Temporarily changing the header’s CSS is a page-specific workaround inferred from DevTools’ ability to inspect and edit CSS; it is not a universal browser setting or guarantee. Chrome DevTools CSS reference

In Playwright, first try the full-page capture and inspect its output. If the header itself is the subject, capture it separately with a locator screenshot. If the page’s own header interferes with the image, a page-specific style adjustment may help, but verify the resulting layout rather than assuming every site responds the same way.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Make one GET request to capture a full page as an image; see the API documentation for options and parameter details.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

Sign up for 1,000 free screenshots a month, with no card.

Troubleshooting

Symptom	Likely cause	What to try
Header covers text	The sticky or fixed header overlaps the captured content.	Inspect the output and header CSS. Temporarily change its positioning or hide it, then capture and verify again.
Header appears more than once	The page’s sticky behavior interacts with the capture method or scrolling.	Try the browser’s built-in whole-page capture, inspect the result, and compare with a single full-page Playwright screenshot rather than assuming stitched scroll captures match.
Lower sections or images are missing	Content may be lazy-loaded or require a selector, scroll, or additional wait.	Wait for the relevant content to appear before capture and inspect the bottom of the image. For automation, wait for a page-specific selector.
Playwright times out at networkidle	Persistent connections or background requests can prevent network idle.	Use domcontentloaded and wait for a meaningful selector, or use a bounded delay when appropriate.
Firefox screenshot button is missing	The DevTools screenshot toolbox button may not be enabled.	Enable it in DevTools Settings under Available Toolbox Buttons, or use Firefox’s Take Screenshot page action.
Full-page command is not where expected	Browser versions can move or rename screenshot controls.	Check the browser’s current screenshot menu and Device Mode or page actions; use the documented full-page command where available.

Performance, reliability, and output checks

• Large pages take longer and produce larger files. Full-page capture covers more pixels than a viewport image, so allow time and storage for long pages.
• Dynamic content can change during capture. Use a deliberate wait condition, then inspect the output for missing or shifted sections.
• Lazy-loaded content needs attention. A page may load images or sections only after scrolling or after a delay. Wait for the specific content you need and verify it appears.
• Sticky-header behavior is page-specific. Test the actual page and capture method; browser documentation does not promise one result for every layout.
• Keep a stable viewport for automation. Set it explicitly so screenshots from repeated runs use the same viewport dimensions.
• Control cost for repeated captures. Local browser automation consumes compute and storage you manage. ScreenshotNeo’s listed plans are Free: 1,000 shots/month; Starter: $5 for 3,000; Growth: $15 for 15,000; Pro: $39 for 60,000; Scale: $99 for 250,000; Business: $249 for 1,000,000. Yearly billing gives two months free, and every feature is on every plan.

FAQ

Does a full-page screenshot include content below the fold?

Yes. Chrome, Firefox, and Playwright document whole-page capture modes that include content beyond the visible viewport.

Can I capture just the sticky header?

Yes. Use a node or locator screenshot, such as Playwright’s page.locator('header').screenshot(), instead of capturing the full document.

Is there a universal setting that prevents a sticky header from repeating?

No universal sticky-header result is documented for all pages and capture engines. Inspect the actual image and use a page-specific CSS adjustment if needed.

Can I use the same approach for a production screenshot service?

Yes. Browser automation such as Playwright is suitable for repeatable capture, while an API can avoid maintaining browser setup. ScreenshotNeo also supports full-page capture and an MCP server for AI agents; its options are documented at screenshotneo.com/docs.