How to print a webpage as it appears on screen (Chrome, Safari, Edge, Firefox)

To print a webpage as it appears on screen, do three things before you print: scroll to the bottom of the page so every image has loaded, open the print settings and turn on Background graphics (Chrome, Edge) or Print backgrounds (Firefox, Safari), and adjust Scale until the layout fits the paper. If the site has its own print layout that hides parts of the page, no print setting will bring them back; take a full-page screenshot and print that instead.

Why a printout doesn't match the screen

Four things usually change between screen and paper:

• The site has a print stylesheet. Websites can give themselves separate styles that apply only when a page is printed or saved as a PDF. Menus, sidebars and buttons are often hidden on purpose, and columns may stack.
• Backgrounds are dropped. To save ink, browsers may leave out background colors and images when printing and darken light text on dark backgrounds. That is why colored boxes, highlights and dark themes come out white.
• The page is a different width. A sheet of paper is narrower than most screens, so a page can switch to the layout it uses on small windows, or cut off on the right.
• Images haven't loaded yet. Many pages load images only as you scroll near them. Anything further down that you never scrolled to may print as a blank space.

Your browser also adds its own header and footer, with the page title, address, date and page numbers, which never appear on screen.

The quick fix in any browser

1. Scroll slowly to the bottom of the page, then back to the top, so images and later sections load.
2. Press Ctrl+P (Windows, Linux) or Command+P (Mac).
3. Turn on background graphics: More settings > Background graphics in Chrome and Edge, More settings > Print backgrounds in Firefox, or the Safari options in the print dialog on a Mac (steps below).
4. Set Scale so nothing is cut off. Lower it if the right edge is missing; try landscape for wide pages.
5. Turn off Headers and footers if you don't want the address and date on every page.
6. Check the preview. It shows exactly what will print, so if something is still missing, the site's print layout is hiding it: skip to the screenshot method below.

Chrome

Press Ctrl+P or Command+P, then open More settings. There you'll find Scale (Default or Custom, from 10 to 200 percent), Margins, and under Options, the Headers and footers and Background graphics checkboxes. To keep a file instead of paper, choose Save as PDF as the destination.

Microsoft Edge

Press Ctrl+P or Command+P and open More settings. Turn on Background graphics, and use Scale (including Fit to printable area) and Margins to fit the page. Microsoft's own tip: if the print preview looks different from the webpage, include the background graphics.

Firefox

Press Ctrl+P or Command+P, keep Format on Original (Simplified is the clutter-free reader version, the opposite of what you want here), then open More settings. Turn on Print backgrounds, turn off Print headers and footers if you like, and set Scale to Fit to page width or a percentage.

Safari on a Mac

1. Choose File > Print.
2. If you only see a small dialog, click Show Details.
3. Open the options pop-up menu in the separator bar and choose Safari.
4. Turn on printing the page's background colors and images, and choose whether to print headers and footers with the address and date.
5. Click Print, or click PDF to save a file.

To shrink a wide page onto the paper, choose Paper Handling in the same pop-up menu and select Scale to fit paper size.

iPhone

Safari on an iPhone prints a page through Share, then Print. For the most faithful copy of what you see, use a full-page screenshot instead:

1. Take a screenshot: press the side button and volume up button together on an iPhone with Face ID, or the side (or top) button and the Home button on an iPhone with a Home button.
2. Tap the thumbnail in the corner, then tap Full Page to capture the whole webpage, not just the screen.
3. Tap Done and choose Save PDF to Files.
4. Open the PDF in the Files app, tap Share, then Print.

Your iPhone and printer need to be on the same Wi-Fi network for AirPrint. More phone options are in How to print a webpage from your phone.

When the print layout hides things: print a full-page screenshot

A screenshot captures the screen version of the page, ignoring the print stylesheet entirely. The result is an image, so text is not selectable, but it looks exactly like the page.

Firefox: right-click the page and choose Take Screenshot, click Save full page, then Download. Open the image and print it.

Chrome or Edge (DevTools): press F12 (or Command+Option+I on a Mac) to open DevTools, then press Ctrl+Shift+P or Command+Shift+P to open the Command Menu. Type "screenshot" and choose Capture full size screenshot. The image lands in your downloads, ready to print.

See what the print layout changes. In Chrome or Edge DevTools, open the Command Menu, type "rendering", choose Show Rendering, and set Emulate CSS media type to print. The page now shows its print version on screen, so you can see what the site hides. Chrome's documentation describes this as a preview tool. Setting it to screen before printing is worth a try (Chrome's own PDF tooling uses the same switch to print with the screen styles), but if the preview still shows the print version, use a screenshot.

If you want the article, not the page

Printing a page as it appears keeps the ads, menus and comment boxes too. If what you really want is the story, a reader view gives a cleaner printout; How to print an article without ads covers every browser, and How to save a webpage as a PDF covers keeping a file. And if you print articles to read away from a screen, Offprint does it differently: text us a link whenever you find something worth reading, and your saves become a printed magazine mailed to you.

Common questions

Why does my webpage print without colors?

Browsers can leave background colors and images out of a printout to save ink. Turn on Background graphics in Chrome or Edge, Print backgrounds in Firefox, or the backgrounds option in Safari's print options.

Why are images missing from my printout?

Often they hadn't loaded: pages load images as you scroll near them. Scroll to the bottom and back, then print again. If they're still missing in the preview, the site's print layout hides them; use a full-page screenshot.

Why does the printed page look like the mobile version?

Paper is narrower than your screen, so the page can switch to its narrow layout. Lower the Scale, or switch to landscape, so the page has more room.

How do I print a whole webpage on one page?

Lower the Scale until the preview shows one page, or use Fit to page width in Firefox or Scale to fit paper size on a Mac. Long pages will still need several sheets to stay readable.