How to Take a Screenshot of a Webpage With a Fixed Header Included

To show a fixed header exactly as it appears on screen, capture the visible browser viewport. To capture the whole document, use a full-page screenshot and inspect the result: a fixed or sticky header may move, repeat, or overlap content depending on the browser and page. To isolate just the header, capture that element. These capture modes produce different images, so choose based on what you need the screenshot to communicate.

1. Choose the capture scope

What you need	Capture mode	What to check
The header as it currently appears in the browser	Visible viewport	Only content currently on screen is included.
The entire long page	Full page	Inspect header placement and whether it obscures or repeats over content.
Only the header or another block	Element capture	The surrounding page context is omitted.
A responsive layout at specific dimensions	Set a viewport size, then capture	Emulation is an approximation; verify mobile-specific rendering on an actual device when it matters.

“Include the fixed header” can mean either preserving its current on-screen state or making one tall image of the document. A viewport capture is the straightforward choice for the first meaning. Full-page capture answers the second, but browser tools do not guarantee identical fixed-position behavior on every site.

2. Capture in Firefox

Use the screenshot interface

1. Open the page and scroll until the header is in the state you want to show.
2. Right-click an empty area and choose Take Screenshot, or press Ctrl+Shift+S (on macOS, Command+Shift+S).
3. Choose Save visible to capture the current viewport or Save full page to capture the document. You can also select a region or let Firefox highlight a page part.
4. Save or copy the image, then inspect it at its intended display size.

Firefox documents visible-area, full-page, selected-region, and page-part capture in its [screenshot interface](https://support.mozilla.org/en-US/kb/take-screenshots-firefox?redirectlocale=en-US&redirectslug=take-screenshots-firefox-redirect-1).

Use Firefox Developer Tools

1. Open Developer Tools and enable the screenshot button in Settings → Available Toolbox Buttons.
2. Choose the page screenshot control for a full-page capture.
3. For a single element, right-click it in the Inspector and choose Screenshot Node.

Firefox’s Web Console screenshot helper also supports full-page and selector captures. For example, enter :screenshot --fullpage for a full-page image or :screenshot --selector "header" to capture the element matched by that selector. The helper also has delay, device-pixel-ratio, filename, and clipboard options. Choose a filename you have not used if you want to keep an earlier capture; reusing one overwrites it. See Mozilla’s [Developer Tools screenshot documentation](https://firefox-source-docs.mozilla.org/devtools-user/taking_screenshots/index.html) for the available options.

3. Set a repeatable viewport

For a layout comparison or a screenshot that must fit a particular space, set the viewport dimensions before capturing. In Chrome, open DevTools Device Mode and enter the responsive width and height you need. Then capture the visible viewport using your browser’s screenshot workflow or a capture tool.

Chrome describes Device Mode as a desktop simulation, not execution on an actual mobile device. It is useful for repeatable dimensions, but if the page relies on device-specific behavior, check it on a real phone as well. See [Chrome’s Device Mode guide](https://developer.chrome.com/docs/devtools/device-mode/).

1. Decide the target width and height, such as the viewport of the page you are documenting.
2. Set those dimensions in responsive mode.
3. Reload if the page’s layout responds to initial viewport size.
4. Scroll to the header state you intend to show.
5. Capture the viewport or full page, then inspect the saved image for clipping, overlap, or unexpected header repetition.

4. Capture with code when you need automation

For repeatable browser-based capture in a project, use a browser automation library that supports screenshots. The example below uses Playwright with Node.js. It opens a page, sets a viewport, and captures what is currently visible, including a fixed header in its present state.

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'viewport.png' });
await browser.close();

Install Playwright in your project before running the script. Replace the example URL and viewport dimensions with your target. A viewport screenshot is the appropriate output when you want the header’s current position. For the full document, change the screenshot call to await page.screenshot({ path: 'full-page.png', fullPage: true });, then inspect the image because full-page stitching and fixed positioning can vary by page and capture method. To capture one element instead, locate it and take an element screenshot:

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

This records the selected element and its contents without the surrounding page. If the page has multiple headers, use a more specific selector.

5. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request can return a screenshot as PNG, JPEG, or WebP, or return a PDF. This example captures a webpage as WebP:

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

See the ScreenshotNeo API documentation for the request options. For a clean capture, ScreenshotNeo accepts cookie and consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each step 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 lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.

6. Troubleshooting

Problem	Likely cause	What to do
The header is missing from the image	The capture is full-page and the header is only fixed in the viewport, or the selected element is not the visible header.	For the header as seen on screen, capture the viewport. For a node capture, inspect the selector and choose the rendered header element.
The header covers page text in a full-page image	The capture method or page’s positioning behavior places the fixed header over document content.	Inspect the result and choose a viewport or content-element capture if the overlap makes the image unusable. Avoid changing page CSS if the screenshot must faithfully represent the original.
The header appears more than once	The page or capture process handles fixed positioning unexpectedly during full-page capture.	Try a viewport capture for a single, current header state. If you need a tall page, check the output and consider capturing content sections separately.
The mobile screenshot does not match a real phone	Desktop device emulation approximates a mobile viewport and does not reproduce every device behavior.	Use emulation for repeatable sizing, then verify on an actual device when mobile-specific rendering matters.
The automated screenshot is blank or incomplete	The page may still be rendering, or required content may load after navigation completes.	Wait for a relevant selector or a suitable delay before capture. For highly dynamic pages, use an explicit readiness condition instead of assuming navigation completion means every visual element is ready.
A previous screenshot was replaced	The Firefox screenshot helper reused the same filename.	Use a different output filename for each capture you need to retain.

Mozilla’s WebRender debugging notes describe compositor readback as a specialized debugging technique for currently composited viewport pixels, not a general-purpose full-page screenshot method. Do not use that setting as a routine way to fix full-page captures.

7. Performance, reliability, and cost

• Choose the smallest scope that answers the question. A viewport image is usually quicker to inspect and avoids ambiguities that can arise when representing fixed elements in a tall capture.
• Wait for the visual state you need. A screenshot taken before fonts, images, or client-rendered content finish can be incomplete. In automation, wait for a meaningful element or state rather than relying on an arbitrary short delay.
• Keep viewport dimensions consistent. This makes visual comparisons more useful. Record the dimensions alongside screenshots when they matter.
• Review full-page output. Fixed and sticky behavior is page- and method-dependent; there is no universal result for every browser and site.
• Consider whether the output must be faithful. Hiding or restyling a header can make content easier to read, but changes what the page looked like. Use such edits only when that altered view is what you intend to publish.
• Browser capture costs. The browser tools described here are built into Firefox and Chrome. Automation adds the operational cost of running a browser and maintaining the script. ScreenshotNeo’s listed plans are free for 1,000 shots a month, then $5 for 3,000 (Starter), $15 for 15,000 (Growth), $39 for 60,000 (Pro), $99 for 250,000 (Scale), or $249 for 1,000,000 (Business); yearly billing gives two months free. Every feature is on every plan.

8. FAQ

Will a full-page screenshot always keep a fixed header at the top?

No universal behavior is established for every browser, capture tool, and page. Inspect the saved image; use a viewport capture when you need the header’s current on-screen appearance.

Can I capture just the header?

Yes. Firefox Developer Tools can capture a node from the Inspector, and its console helper accepts a CSS selector. A selector-based capture omits the rest of the page.

Does a viewport screenshot include content below the fold?

No. It captures the visible area. Use full-page capture when you need the rest of the document, then review how the header is represented.

Is desktop mobile emulation identical to a phone?

No. It provides useful responsive dimensions, but Chrome characterizes Device Mode as a simulation. Verify on a real phone when device-specific behavior matters.

Sources

• Mozilla Firefox Source Docs: Taking screenshots
• Mozilla Support: Take screenshots in Firefox
• Chrome for Developers: Simulate mobile devices with Device Mode
• Mozilla Firefox Source Docs: Capturing WebRender screenshots for debugging