October DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsClean PCRecommendedOne scan can reveal what keeps slowing WindowsLook for cleanup and repair opportunities.Run ScanOctober DealsAmazon USDeal season is back - check today's better picksAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
CSS

How to Fix HTML Images Missing From Print Preview

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

First determine whether the missing graphic is an HTML <img> (or a <picture> image) or a CSS background-image. Print previews apply print styles, and browsers may omit backgrounds by default; an HTML image that is missing usually calls for checking its source, loading state, and print CSS. Work through the checks below in that order: it separates a print preference from a broken or hidden image.

1. Identify what kind of image is missing

The fix depends on how the page displays the image. Inspect the element in your browser’s developer tools, or inspect the page markup:

  • HTML image: Look for an <img> element or an image supplied through <picture> and <source>. Follow the resource and loading checks in section 4.
  • CSS background: Look for background-image on the element or its styles. Start with the print dialog’s background setting, then check print CSS.

This distinction matters because a background is decorative styling as far as the print dialog is concerned, while an <img> is a document image with a source that can fail to load. If you cannot immediately identify it, use the browser’s element inspector and check the element’s computed styles for background-image.

2. Check the print dialog’s background setting

Browsers may leave CSS backgrounds out of print output to save ink or paper. That can make a page look correct on screen but lose its background artwork, colors, or other styling in preview.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
#1 Best Overall
Brother DCP-L2640DW Wireless Compact Monochrome Multi-Function Printer, Copy, Scan, Duplex, Mobile Printing
  • BEST FOR SMALL BUSINESSES – Engineered for extraordinary productivity, the Brother DCP-L2640DW Monochrome (Black & White) 3-in-1 combines laser printer, scanner, copier in one compact footprint and delivers high-quality black & white prints
  • FAST PRINTER WITH EFFICIENT SCANNING – Produces documents quickly with print speeds up to 36 ppm(2) and scan speeds up to 23.6/7.9 ipm(3) (black/color). A 50-page auto document feeder(4) allows for convenient, time saving multi-page scanning and copying
  • FLEXIBLE CONNECTION OPTIONS – Easily navigate the changing demands of your business with secure multi-device connectivity via built-in dual-band wireless (2.4GHz / 5GHz) and Ethernet. Or connect locally to a single computer via USB interface
  • BROTHER MOBILE CONNECT APP – Print, scan, and manage your wireless printer anytime, from almost anywhere from your mobile device. Order Brother Genuine Supplies, track toner usage, and complete more work on-the-go(5)
  • CHOOSE BROTHER GENUINE TONER – When it’s time to replace your toner, be sure to choose Brother Genuine TN830 or TN830XL replacement toner. And with Refresh EZ Print Subscription Service, you’ll never worry about running out of toner again and you’ll enjoy savings of up to 50%(6) on Brother Genuine Toner. Get started with Refresh today with a Free Trial(1)
  1. Open the browser’s Print dialog and inspect its expanded settings.
  2. In Firefox, expand More settings and enable Print backgrounds.
  3. In another browser, look for an equivalent background-graphics or background-colors option; the label and location can differ.
  4. Reopen or refresh the print preview and check whether the background appears.

If this is a page you do not control, the print setting is usually the most practical fix. If you maintain the page, you can also request that the browser preserve a background’s authored appearance with CSS, as described in section 3. That request cannot override a user’s print preference in every browser.

3. Inspect print-specific CSS

A page can use a different stylesheet or different rules when printed. A print rule may hide the image itself or an ancestor, remove its dimensions, or clip it out of view. A separate stylesheet linked with media="print" can also change the result.

Emulate print media in Chrome DevTools

  1. Open the page in Chrome and open DevTools.
  2. Open the DevTools Rendering panel (if it is not visible, open the DevTools menu and find it under More tools).
  3. In the Rendering panel, set the emulated CSS media type to print.
  4. Inspect the missing image and its ancestors. Check computed styles and the Styles panel for rules that apply only in print.
  5. Search the page’s loaded stylesheets for @media print and inspect linked stylesheets with media="print".

Look for display: none, visibility: hidden, zero width or height, clipping, or a hidden parent. A rule on an ancestor can remove an otherwise correctly loaded image from the printed page. After testing, return the emulation setting to its default so you do not mistake the simulated view for the ordinary screen view.

Rank #2
Brother HL-L2405W Wireless Compact Monochrome Laser Printer with Mobile Printing, Black & White Output | Includes Refresh Subscription Trial(1), Works with Alexa
  • BEST FOR HOMES & HOME OFFICES – Engineered for consistent, premium print quality, the Brother HL-L2405W Monochrome (Black & White) Laser Printer delivers sharp, crisp prints at an affordable price. Prints one-sided documents at speeds up to 30ppm(2)
  • COMPACT, CONNECTED PRINTER – Flexible connection options make this an ideal printer for home use and at-home offices. Securely connect to multiple devices with built-in dual-band wireless (2.4GHz/5GHz) or locally to a single computer via USB interface
  • BROTHER MOBILE CONNECT APP – Manage your printer remotely and print from your mobile device anytime, from almost anywhere. Order Brother Genuine Supplies, track toner usage, and complete more work on-the-go(3)
  • VERSATILE PAPER HANDLING – Enjoy seamless, reliable everyday printing with the 250-sheet paper tray(4) and a manual feed slot that enables printing on envelopes and specialty pape
  • BROTHER IS AT YOUR SIDE – Backed by Brother with a 1-year limited warranty and free online, call, or live chat support for the life of your printer

Fix the rule that removes the image

If a print rule hides the image or its container, adjust that rule for the print layout. For example, if a broad rule hides all images, narrow it to the decorative elements that should be omitted rather than removing meaningful illustrations too. If the image is clipped or has no dimensions only in print, correct the relevant print styles instead of adding unrelated overrides.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

For an important CSS background, a page author can request exact color adjustment on the specific element:

.print-artwork {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact; /* legacy WebKit/Blink compatibility */
}

Apply this narrowly. print-color-adjust: exact asks the browser to preserve the authored appearance; it does not guarantee that the background will print. User settings take precedence, and browsers retain discretion over print output. If the graphic conveys information rather than decoration, consider using an actual <img> with useful alternative text instead of relying only on a background, then verify the print stylesheet and output.

Rank #3
Sale
Canon imageCLASS LBP6030w - Monochrome Single-Function Wireless Compact Wireless Laser Printer, 1 Year Limited Warranty, 19 PPM, White - Print Only
  • FAST PRINT SPEEDS: Print up to 19 pages per minute.
  • COMPACT DESIGN: Space-saving, compact design fits anywhere in your home, school or small office.
  • WIRELESS CONNECTIVITY: Print from almost anywhere in your workspace using your compatible mobile device.
  • PAPER CAPACITY: Up to 150 sheets.
  • SUSTAINABILITY: Uses less than 2 watts in Energy Saver mode.

4. Check an HTML image’s source and loading state

If the missing content is an <img> or a <picture> image, confirm that the browser has a valid image to print before changing print-color settings.

Verify the selected image URL and request

  • Inspect the final src and, where present, the selected srcset candidate. Responsive images may use a different URL than the one you expected.
  • Open the browser’s Network panel, reload the page, and check the image request for a failed or unsuccessful response. Use the Console panel to look for related loading errors.
  • Confirm that the image URL is valid and that the resource is a supported, uncorrupted image. Empty or null sources, corrupted files, and unsupported formats can prevent an image from appearing.
  • If the URL or markup is wrong, correct it and reload before opening print preview again.

Check lazy loading and timing

An image with loading="lazy" is intentionally deferred until the browser needs it. A page’s load event does not prove that every lazy-loaded image has finished loading. This matters when the image is below the fold or when a print workflow opens before the image has been requested.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

For a focused test, temporarily change that image to loading="eager", reload, and confirm the image has loaded before printing. If that fixes the preview, investigate when the image is brought into view or when the print action begins. Do not treat the eager setting as proof that the source is valid; still check the request. Set explicit dimensions to reserve layout space, especially for lazy images:

Rank #4
Brother HL-L2460DW Wireless Compact Monochrome Laser Printer with Duplex, Mobile Printing, Black & White Output | Includes Refresh Subscription Trial(1), Works with Alexa
  • BEST FOR HOME OFFICES & SMALL TEAMS – Engineered for consistent, premium print quality, the Brother HL-L2460DW Monochrome (Black & White) Laser Printer produces documents that are clear, crisp, and easy to review and share, all at an affordable price
  • COMPACT, CONNECTED, EXCEPTIONALLY EFFICIENT– Connect with built-in dual-band wireless (2.4GHz/5GHz), Ethernet, or to a single computer via USB interface. Prints at speeds up to 36ppm(2), plus automatic duplex printing saves time and reduces paper waste
  • BROTHER MOBILE CONNECT APP – Manage your wireless printer remotely and print from your mobile device anytime, from almost anywhere. Order Brother Genuine Supplies, track toner usage, and complete more work on-the-go(3)
  • VERSATILE PAPER HANDLING – Tackle high-volume black & white printing with the 250-sheet capacity paper tray.(4) The manual feed slot enables printing on envelopes and specialty paper
  • BROTHER IS AT YOUR SIDE – Backed by Brother with a 1-year limited warranty and free online, call, or live chat support for the life of your printer
<img src="/images/diagram.png"
     alt="Diagram showing the page layout"
     width="1200"
     height="800"
     loading="eager">

Use the actual image dimensions and meaningful alternative text for the content. The snippet uses eager loading to illustrate a diagnostic test; images that do not need to load immediately can remain lazy-loaded when the page’s print flow handles them correctly.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

5. Compare preview, PDF, and another browser

Once the setting, styles, and image request are checked, compare outputs to locate where the problem occurs:

  1. Save the print preview as a PDF where the browser offers that option, then inspect the PDF itself.
  2. Open the same page in another browser and compare its print preview or saved PDF.
  3. If only CSS backgrounds disappear, return to the browser’s print-background preference.
  4. If an HTML image fails in more than one browser, focus on its markup, source request, loading state, and print CSS.

A difference between browsers points toward browser-specific print behavior or settings. A missing image in multiple browsers is stronger reason to inspect the document and its resources. Compare the same page state and settings where possible; changing both the browser and the page at once makes the cause harder to isolate.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Best Value
HP LaserJet M110w Wireless Black & White Printer, Print, Fast speeds, Easy Setup, Mobile Printing, Best-for-Small Teams
  • FROM AMERICA'S MOST TRUSTED PRINTER BRAND – Perfect for small teams printing professional-quality black & white documents and reports. Perfect for 1-3 people
  • WORLD'S SMALLEST LASER IN ITS CLASS – Precision laser printing that fits anywhere
  • FAST PRINT SPEEDS – Up to 21 black-and-white pages per minute single-sided
  • WIRELESS WITH SELF-RESET – Helps you stay connected
  • PRINT FROM ANY DEVICE – Wireless printing from any mobile device, PC or tablet. Works with Microsoft, Mac, AirPrint, Android, Chromebook and more

6. Common symptoms and fixes

What you see Most useful check What to do
Background artwork or color is missing, but the page’s text and images print Print dialog background setting Enable the browser’s print-background option, if available; if you author the page, narrowly apply print-color-adjust: exact and still verify the result.
An <img> is absent in print and on screen Image request, source URL, and format Fix a bad or empty source, failed request, unsupported format, or corrupted resource.
An image appears on screen but disappears in print emulation Computed styles and print rules on the image and its ancestors Correct the applicable @media print or print stylesheet rule, including hiding, sizing, or clipping.
A below-the-fold image appears inconsistently loading="lazy" and whether the image loaded before printing Test with eager loading, confirm completion, and correct the print workflow if it runs too early.
The problem occurs in one browser but not another Print dialog settings and browser-specific output Compare the same page in each browser and check whether the missing item is a CSS background or an HTML image.

7. Or skip the browser setup

If you need a clean screenshot of the page as it renders on screen—not a reproduction of browser print preview—ScreenshotNeo can capture a webpage through one GET request. It is a screenshot API and MCP server, not a substitute for checking print media rules or proving how a printer will render the page.

For API options and response details, see the ScreenshotNeo documentation. Here is the cURL call from a terminal:

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

Replace YOUR_API_KEY with your key and the example URL with the page you want to capture. The API can return PNG, JPEG, WebP, or PDF. If you prefer Python or Node.js, these equivalent calls use the provided request pattern:

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}`);
  • Before capture, it accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off.
  • Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing. Responses identify the page verdict and billing status in X-Page-Verdict and X-Billed headers.
  • Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
  • The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. The features are available on every plan.

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

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Read next

Recommended PC Tool
Recommended PC Tool
PC Slower Than It Used to Be?Free scan - under a minute
Crashes, No Sound, or Screen Glitches?Free driver scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.