How to Screenshot a Website with a Sticky Footer Without Covering Content

In Chrome, open DevTools, choose More options > Capture a full size screenshot, then inspect the saved image for overlap. This captures the whole page, including content outside the viewport; it does not guarantee that every fixed or sticky footer will be handled identically on every site. If the footer still covers content, make a scoped temporary CSS change and take a second screenshot. Treat that second image as an altered-state capture, not a record of the page as visitors originally saw it.

1. Capture the full page in Chrome

1. Open the page in Chrome and wait for the visible content to settle. If the page loads images or other content as you scroll, scroll through it first, then return to the desired starting position. This can help trigger lazy loading, but it does not guarantee that virtualized or dynamically loaded content will all be present.
2. Open DevTools. If a particular viewport matters, enable Device Mode and set its dimensions before taking the screenshot.
3. Open the DevTools More options menu and select Capture a full size screenshot.
4. Open the resulting image and inspect the footer and the content immediately above and behind it. Chrome distinguishes this command from Capture screenshot, which captures only the current viewport. See the Chrome DevTools screenshot documentation.

A full-size capture is the right first step when you want the whole document. A fixed footer may remain fixed in the capture, overlap content, or behave differently because of the page’s layout and scripts. Check the actual output rather than assuming the footer was removed or harmless.

2. If the footer still covers content

First decide what the screenshot needs to show:

• What a visitor sees: preserve the page as rendered, including the footer. Keep the unmodified screenshot as the record.
• Content beneath the footer: take a separate supplemental screenshot after a temporary, narrowly scoped change to the footer. Label it as an altered rendering.

1. In DevTools, use the element picker to select the footer that is covering content.
2. Confirm that you selected the specific fixed or sticky footer, rather than a shared container or a different page element.
3. In the Styles pane, temporarily disable the relevant positioning declaration, such as position: fixed or position: sticky, or temporarily hide that one element.
4. Take a supplemental full-size screenshot and inspect it. Restore the original style by undoing the edit or reloading the page.

The exact CSS rule varies by site, so avoid applying a broad rule to every footer or changing layout styles across the whole page. Hiding the footer may also remove useful content or controls; disabling its positioning may change page height and layout. Record which change you made if the image will be used as evidence or shared with others.

3. Automate capture with the Chrome DevTools Protocol

For scripted capture, the Chrome DevTools Protocol provides Page.captureScreenshot, including the captureBeyondViewport option. This is a protocol method, not a standalone command-line invocation: a client must launch or connect to Chrome, attach to a page target, enable the Page domain, send the method, and save the returned base64 image data. Consult the current Page protocol reference for parameters and behavior.

{
  "method": "Page.captureScreenshot",
  "params": {
    "format": "png",
    "captureBeyondViewport": true
  }
}

The snippet shows the method and relevant option; it is not a complete WebSocket client. The protocol documentation also describes options such as image format and clipping. Choose the capture settings to match the artifact you need, then inspect the result for overlays and missing dynamically rendered content. Protocol support for capturing beyond the viewport does not promise that every sticky footer, virtualized list, or page script will produce the same result.

4. Firefox and other capture choices

Firefox documents its own full-page screenshot workflow, including browser developer tools and command-line capture. See Mozilla’s screenshot documentation for the current steps. As with Chrome, check the saved result for overlap and content that was not loaded when capture began.

Method	Best for	What to check
Chrome DevTools full-size screenshot	Manual capture of a complete page	Whether the footer overlaps content and whether dynamic content loaded
Chrome DevTools Protocol	Scripted browser capture	Protocol parameters, page readiness, and the returned image
Firefox screenshot tooling	Browser-native alternative	Full-page output and site-specific fixed elements
Temporary CSS adjustment	A supplemental view of obscured material	Clearly label the image as a modified rendering

5. Common problems and fixes

Problem	Likely cause	What to do
The screenshot contains only the visible viewport	The viewport capture command was used instead of the full-size command.	In Chrome DevTools, select Capture a full size screenshot. In automation, use the protocol capture method and review its beyond-viewport option.
The footer still covers text or controls	The page’s fixed or sticky element remains part of the rendered page.	Keep the original capture if it documents visitor experience. For the underlying content, make a scoped temporary edit and label the supplemental image as altered.
Images or sections are missing	Lazy loading, delayed requests, scripts, or virtualization may mean content was not present at capture time.	Wait for the page to settle, scroll through content that loads on scroll, and capture again. Check whether a virtualized page only renders nearby items.
The edited page layout looks broken	Removing positioning can change flow, while hiding an element can leave spacing or remove useful content.	Change only the selected footer, compare with the original, and reload to restore the page. Do not treat the modified screenshot as an untouched record.
Automated output differs from a manual capture	The page may have loaded at a different time or viewport, or the automation may use different capture parameters.	Set the viewport intentionally, wait for the required content, and inspect the exact protocol options used.

6. Reliability, performance, and cost considerations

For a one-off screenshot, browser DevTools avoids setting up an automation client. For repeatable captures, a protocol client can make the viewport and capture options explicit, but the script still needs to manage page loading, errors, output files, and inspection. Large pages and image-heavy pages can take longer to load and produce larger files; choose PNG when you need lossless detail, or another supported format when file size matters. Do not assume scrolling will load every item on a virtualized page.

For reliable documentation, retain the unmodified capture and label any CSS-adjusted version. That distinction matters when the screenshot is evidence of the visitor experience: the adjusted image reveals content but no longer represents the original rendered state. Browser-native workflows have no screenshot-service charge; automation has the operational cost of running and maintaining the browser and capture code.

7. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its API returns an image or PDF from one GET request. See the API documentation for options and response 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}`);

• Cookie banners are accepted and removed before capture; known consent platforms, newsletter popups, and chat widgets can also be removed. Each step can be turned off.
• Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed. Response headers report the page verdict and billing status.
• An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients.
• The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is available on every plan.

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

8. FAQ

Does a full-page screenshot remove a sticky footer?

Not necessarily. Full-page capture captures beyond the visible viewport, but site layout and scripts affect how fixed or sticky elements appear. Inspect the saved image.

Should I hide the footer before capturing?

Only if you need a separate view of covered content. Keep the original screenshot when you need to show what the page rendered for a visitor, and identify the edited version as altered.

Can I do this without an extension?

Yes. Chrome and Firefox document browser-native screenshot workflows, and Chrome’s DevTools Protocol supports scripted capture.

Will scrolling the page load everything?

It may trigger lazy-loaded content, but it cannot guarantee that all content on a dynamic or virtualized page will be rendered at once.