Why Images Do Not Appear in Chrome Print Preview and How to Fix Them

Short answer: Chrome prints a page using its print rendering rules. Open the webpage (not a PDF viewer), press Ctrl+P on Windows/Linux or Cmd+P on macOS, expand More settings, and enable Background graphics when the missing artwork is a CSS background. If a normal <img> is still missing, inspect the page in Chrome DevTools with the print media type enabled and check print-only CSS, dimensions, loading, and the image source.

This guide covers both people trying to print a page and developers who own the page or generate PDFs from it.

1. Identify what Chrome is printing

There are two common paths:

A webpage: you press the browser’s print command while viewing a site.
A PDF opened in Chrome: the PDF viewer has its own controls and can expose different settings.

Test the webpage path first. If the source is a PDF tab, save or regenerate the PDF and inspect that file separately. A page can show images on screen while its print representation hides them.

2. Immediate fix for a missing background image

Open the webpage itself.
Press Ctrl+P (Windows/Linux) or Cmd+P (macOS).
Expand More settings.
Turn on Background graphics.
Check the preview again.

Chromium describes this control as printing webpage backgrounds. It affects CSS backgrounds, colored panels, stationery, and decorative artwork; it does not repair an ordinary foreground <img> hidden by CSS or an image that never loaded. See the Chromium label in Chromium’s source.

3. Why the screen and preview differ

Chrome switches from screen media to print media. Rules inside @media print, print stylesheets, and print-specific framework classes can hide, resize, replace, or reposition images. The CSS print media type exists specifically for paper and PDF output.

Chrome also optimizes printed output. MDN documents that print-color-adjust: economy permits the user agent to omit backgrounds or make other changes; exact requests preservation, while the user’s print preference still takes priority. Read MDN’s print-color-adjust reference.

4. Fix a page you own

Keep an essential image visible

@media print {
  .print-figure,
  .print-figure img {
    display: block !important;
    visibility: visible !important;
  }

  .print-figure img {
    max-width: 100%;
    height: auto;
  }
}

Use a narrowly scoped class rather than forcing every image on the page to print. Check for later or more specific rules that set display: none, visibility: hidden, width: 0, height: 0, opacity: 0, or a print-only replacement source.

Preserve an intentional background

@media print {
  .certificate,
  .certificate--front {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background-image: url('/assets/certificate-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
}

Apply the adjustment to the element that owns the background-image. The CSS property is a request, not a way to override a user’s print preference, so the user must still enable Background graphics.

Make image sources print-safe

Use an absolute or correctly rooted URL that is available from the printed page.
Confirm srcset selects a valid candidate at print layout width.
Avoid relying only on a lazy-load library that waits for scrolling; printing may not trigger the scroll observer.
For canvas or SVG, verify that the print path includes the element and that its dimensions are nonzero.
Keep critical images in the document flow rather than inserting them only after a screen-only animation.

5. Diagnose with Chrome DevTools

Open DevTools with F12 or Ctrl+Shift+I.
Open the three-dot menu, choose More tools > Rendering.
Under Emulate CSS media type, select print. Chrome documents this workflow in its DevTools rendering guide.
Inspect the missing node in Elements and Computed.
Check display, visibility, dimensions, opacity, content, background-image, src, and the resolved srcset candidate.

Classify the asset before changing code:

Asset	What to verify	Typical fix
`<img>`	Print CSS, intrinsic size, source and loading state	Override hiding rules; provide a loaded, reachable source
CSS background	Background declaration and print preference	Enable Background graphics; use print-color-adjust where appropriate
SVG or canvas	Print dimensions and rendering path	Give it explicit dimensions or provide a print fallback
Lazy-loaded asset	Whether it loaded before print	Load critical assets before opening print preview

6. Use the saved PDF to isolate the failure

Choose Save to PDF in the print dialog. If the saved PDF already lacks the image, the problem is page or print rendering. If the PDF contains it but paper output does not, investigate printer settings, paper, scaling, and the printer driver separately. Printing a webpage and printing a PDF opened in Chrome can show different dialogs and controls, so compare like with like.

7. When Background graphics is missing

The control may be unavailable because you are in the PDF viewer rather than printing a webpage, or because Chrome is managed by an organization. Enterprise policy can set the default for background-graphics printing and can prevent users from changing it; consult your administrator or the applicable Chrome Enterprise policy documentation. For a page you control, still fix print CSS, but do not assume a site can force a user’s browser policy.

8. Common errors and fixes

Symptom	Likely cause	Fix
Only colored sections and decorative artwork disappear	They are CSS backgrounds and background printing is off	Enable Background graphics; apply print-color-adjust to intentional backgrounds
An inline photo disappears while text remains	Print CSS hides the image or collapses its size	Emulate print media and inspect computed display, visibility, width, and height
Image space is present but blank	Source failed, lazy loading did not run, or a print-only URL is invalid	Check the network request and resolved `src`/`srcset`; preload or eagerly load critical assets
Preview differs from a PDF tab	Different rendering path and dialog	Identify whether you are printing the webpage or the PDF viewer; test both outputs
Background graphics cannot be changed	Managed Chrome policy	Ask the administrator to review background-graphics policy
Image is clipped or tiny	Print layout width, max dimensions, or page breaks	Set print dimensions and `max-width: 100%`; inspect the print layout before changing page breaks

9. Performance and reliability for generated output

Use a dedicated print stylesheet so screen layout changes do not accidentally hide print content.
Keep essential assets small and cacheable, but verify that authentication and cross-origin rules allow the print renderer to fetch them.
Wait for images and fonts to finish loading before invoking automated print. A fixed delay alone is less reliable than waiting for a known selector or network idle.
Prefer deterministic dimensions and avoid animations, carousels, and viewport-only lazy loading in print content.
For repeated captures, cache stable pages and invalidate the cache when the source changes.

10. Or skip the browser setup

If your goal is a clean screenshot or PDF rather than debugging Chrome’s print renderer, ScreenshotNeo provides a single GET request. Its capture can accept consent banners and remove 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 are not billed, and the response reports its verdict and billing status in X-Page-Verdict and X-Billed headers. It also provides an MCP server for AI agents with take_screenshot, get_page_info, and capture_pdf.

See the ScreenshotNeo API documentation for all options, including full-page and element capture, print/PDF settings, custom CSS and JavaScript, waiting rules, headers, cookies, geolocation, caching, signed links, async jobs, and bulk capture.

cURL

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

Python

import requests

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

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

There is a free tier of 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan. Create a free ScreenshotNeo account.

11. FAQ

Does Background graphics print every image?

No. It primarily controls CSS backgrounds. Foreground <img> elements still depend on print CSS, layout, and successful loading.

Can CSS force Chrome to print backgrounds?

print-color-adjust: exact asks the browser to preserve appearance, but the user’s print preference and managed policy take priority.

Why does DevTools help if the problem is in the print dialog?

It reveals the alternate print-media layout before you open the dialog, making hidden selectors, zero dimensions, and print-only replacements visible.

What if the PDF is correct but paper is not?

Treat that as a printer or driver issue. The page’s print rendering has already produced the image in the PDF.