A web page looks correct in the browser, but the PDF has a white background, missing background images, or different colors. This does not always mean the page is broken. Browsers can intentionally change styling for print output.
MDN notes that browsers commonly remove background colors and images when printing, and user print preferences can override a page’s CSS. That makes print settings and print-specific CSS the first places to investigate.
1. Check Print Preview first
Open the page in the browser and use Print Preview. If the background is already missing in preview, the problem happens before the PDF is created. Changing PDF readers afterward will not restore content that was never printed.
2. Look for a background-graphics option
Many browser print dialogs provide an option for background graphics or backgrounds. If the design depends on them, enable that option and check preview again. The exact wording varies by browser and platform.
3. Understand print-specific CSS
A website can use @media print rules to deliberately hide or restyle elements for printing. Developers should inspect print CSS when screen and PDF output differ. The CSS @page rule can also control page-oriented properties such as size and margins.
4. Use print-color-adjust carefully
MDN documents print-color-adjust. Its default economy behavior lets the browser adjust appearance for print, including potentially omitting backgrounds. exact asks the browser to preserve the designed appearance, but it is not a guarantee: user print preferences can take priority.
5. Check whether the image is actually a CSS background
An ordinary image element and a CSS background are not treated identically by print engines. If an essential diagram is implemented only as decorative background styling, test whether it survives print output. For critical content, use web markup that remains meaningful when print styles are applied.
6. Create a fresh PDF after the preview is correct
Once Print Preview shows the intended page, save it as PDF. If you have an HTML file or web content prepared for conversion, the RevifyHub HTML to PDF tool can provide another conversion route. Different rendering engines can produce different results, so verify the output rather than assuming pixel-perfect equivalence.
Common mistakes
- Expecting screen CSS and print CSS to be identical.
- Ignoring the browser’s background-graphics preference.
- Using a background image for essential information.
- Assuming
print-color-adjust: exactoverrides user settings. - Skipping Print Preview.
If the layout also changes
Inspect print-specific margins, page size, fixed-width containers, overflow, and page breaks. A page designed only for a wide screen may need a dedicated print stylesheet. Test more than one page, especially tables, cards, and sections near page breaks.
How to verify the result
- Compare browser view with Print Preview.
- Confirm required backgrounds and images appear.
- Save a new PDF.
- Open it in a separate PDF viewer.
- Check text contrast, page breaks, images, and the first and last page.
A controlled troubleshooting workflow
Start with a copy of the page or HTML file. Record the browser, operating system, paper size, scale, and print destination. Save one baseline PDF before making changes. This gives you something concrete to compare with each later version. Change one setting at a time: if you enable backgrounds, change margins, and switch rendering engines together, you will not know which change solved the problem.
Choose a page containing both a solid background and a background image. Also include an ordinary image, readable text, and a section that spans a page boundary. This small sample helps separate color handling from image loading and pagination. A successful first page does not prove that a longer document will print correctly.
For readers who do not own the website
- Wait until the visible page finishes loading. Scroll through the sections you need so delayed content has a chance to appear.
- Open the browser print dialog and select a PDF destination.
- Expand additional settings and look for Background graphics or a similar preference.
- Enable that preference, then inspect the preview. Confirm that text remains readable on the restored background.
- Review paper size, orientation and scale. Use Letter when the recipient expects US Letter, or the specific size requested by the destination.
- Save a new PDF and reopen that exact file in a separate viewer.
If the page provides a dedicated print or download button, compare that output with browser printing. The site may supply a document specifically prepared for paper. Do not assume either route is better without checking the information you need. A simplified print view may deliberately omit navigation and decoration while preserving the actual article, invoice, or report.
If essential information is missing in both routes, ask the page owner for a complete export. A screenshot may capture appearance, but it can produce image-only text and does not provide the same selectable, searchable or accessible document as a well-prepared PDF.
For developers: inspect the print rules
Look for an existing print stylesheet before adding more CSS. Search the project for print media rules, stylesheet links with a print media attribute, and declarations that hide elements. A screen background can disappear because a print rule explicitly replaces it with white, sets the background to none, or removes the entire containing element. Fixing the browser preference will not restore an element the stylesheet intentionally hides.
Use developer tools to emulate print media when supported. Compare the computed background, color, display, visibility and dimensions of the affected element. Check its ancestors too: a visible child can still be absent when its parent is hidden. Keep a note of the exact selector responsible so the repair stays narrow and does not change unrelated parts of the page.
A useful print design begins with readable content. Use a white page, dark body text, clear borders and labels that still communicate meaning without color. Then selectively preserve backgrounds that add meaning, such as alternating table rows or a chart legend. Avoid requiring a dark full-page background merely to keep light text visible.
A small print CSS example
@media print {
.status-table {
print-color-adjust: exact;
}
.status-table td {
border: 1px solid #555;
}
.navigation {
display: none;
}
}This example requests color preservation for one table, adds visible cell boundaries, and removes navigation. It is a starting point, not a guaranteed output. Choose selectors that actually exist in your page. Review the browser’s print preference because user choices can override the color request. Do not apply the rule to every element without checking the consequences for contrast, page count and document size.
When an ordinary image is missing
A missing image element needs a different investigation from a missing decorative background. First confirm that the image appears on screen immediately before printing. If it does not, check the source address, network request, permissions, and whether the asset exists. A PDF renderer cannot reliably include an image that never loaded.
For a saved HTML file, relative image paths may point to files that were not copied with it. Keep the HTML and its asset folder together, or use correctly resolved paths in the conversion environment. A page that works on the original website can fail when only the HTML source is moved elsewhere. Check the browser console and network panel rather than compensating with stronger compression or a different PDF viewer.
Lazy-loaded images can also complicate a capture workflow. Make sure the converter waits for required resources and that all important content is present before the PDF is produced. This is especially relevant to long reports, embedded charts and content loaded after interaction. If you control the site, provide a print-ready state that includes the necessary information without depending on scrolling or hovering.
Fix page breaks without hiding content
Once the backgrounds are restored, inspect the layout separately. A wide dashboard may overflow a printed page. A fixed-height card can cut off a long paragraph. A table can split at an awkward point, and a sticky header can overlap text. These are pagination problems rather than color problems.
Test portrait and landscape deliberately. Avoid shrinking the entire page until body text becomes unreadable. Where practical, create a narrower print layout, allow containers to grow vertically, and simplify multi-column sections. Use the page-size and margin controls consistently between preview and final export.
For example, a monthly report might contain a wide chart followed by several paragraphs. Landscape could help the chart but waste space on the text. A dedicated print layout can rearrange the chart and preserve normal text size. Compare the complete document, including the final page, after any layout change.
Compare conversion routes fairly
Browser Save as PDF, a site-generated PDF and a separate HTML converter may use different rendering settings. Compare them with the same source and the same expected content. Record whether each result contains the required backgrounds, ordinary images, charts, selectable text, links and page breaks.
The RevifyHub HTML to PDF tool is an alternative route to inspect, but this guide does not claim that it preserves every web application, authenticated page, script-generated chart or background. Check its visible input requirements before using it. Keep sensitive or restricted information within an approved workflow.
A practical acceptance checklist
Before approving the document, ask whether the recipient can understand it without the original website. Labels should explain chart colors. Important text should remain visible even if a background differs slightly. No column should end beyond the paper edge, and no page should stop halfway through a required paragraph.
Check the first page, a complex middle page and the last page. Compare a table row, a chart label and a small caption with the original. Search for a distinctive sentence and copy it into a plain-text editor. If links matter, click a real example in the PDF. A visual match alone does not establish that these document behaviors survived.
Frequently asked questions
Will changing PDF readers restore the missing background?
Usually the first useful check is print preview. If the background was absent there, it was probably excluded before the PDF was saved. Create a corrected export rather than expecting the reader to add omitted page content.
Is exact color preservation guaranteed?
No. The CSS request, browser support, user preferences and conversion settings all matter. Review the actual output, especially where colors communicate meaning or low contrast makes text hard to read.
Should essential information be placed in a CSS background?
Prefer meaningful document content for essential information. A background can support appearance, but the page should still explain its message when decorative styling is removed.
Why is the screenshot correct but the PDF different?
A screenshot captures a screen view. Printing can use a separate stylesheet, paper dimensions and pagination. Compare print preview rather than treating the screenshot as proof of the print layout.