7

Using phantom JS 1.9.7 I am having issues printing my webpage to PDF.

Instead of matching the page exactly, background colors and images are stripped, as per: How can I force browsers to print background images in CSS?

Community
  • 1
  • 1
Jason
  • 15,064
  • 15
  • 65
  • 105

1 Answers1

12

Thanks to a post on another question, here is the answer:

body { 
  -webkit-print-color-adjust: exact;
}

You can add the CSS style "-webkit-print-color-adjust: exact;" to the element to force print the background color and/or image.

See the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust

Odd how this is on MDN.

Jason
  • 15,064
  • 15
  • 65
  • 105
  • 9
    Worth noting that adding `!important` to _color_ and _background_ definitions may be required for them to display properly. Thankfully it's quite easy to debug with Chrome's built in CSS media=print emulation. – jkondratowicz Mar 13 '14 at 09:12
  • 1
    Yeah, but this has pretty much NO support at all right now. You have to manually do `!important` in a `@media print` CSS block for all elements you want to keep their color/background. – Danail Gabenski Jun 11 '15 at 21:56
  • i had to follow this answer to get it to work: http://stackoverflow.com/a/15253634/1979461 – GarethD Apr 12 '16 at 21:15