Print Background colours in Chrome
Solution 1
You adjust in the browser, whether the background colors and images are printed. See your browsers printing options.
Google Chrome offers this feature starting from version 26 (march 2013).
Also starting from version 17, Chrome allows changing the background print behavior programmatically by using -webkit-print-color-adjust:exact;
in the element CSS to print the background.
Solution 2
Gordon's answer is great, but for people whose CSS skills are rusty, here's a more complete example.
Put the following in your document's <head>
section.
<style type="text/css">
@media print { body { -webkit-print-color-adjust: exact; } }
</style>
By the way, although Chrome/Chromium's print dialog now has a Background graphics
checkbox, it only seems to work if you do not click Print using system dialog
(observed with Chromium in Linux).
Solution 3
Chrome > Print (cmd P
) > click More Settings > Options: check Background graphics
Mick
Updated on February 25, 2020Comments
-
Mick over 4 years
I am trying to print a PHP generated document in chrome, on the browser it looks fine Link to the page I want to print But my printer will not print any coloured backgrounds, can anyone offer any suggestions please? Can I do this with CSS?
-
Xr. over 14 yearsAlso, keep in mind that a vast majority of browsers disables background colors and images by default.
-
danielmesh over 11 yearsThank you for that tip Eduardo!
-
Jeremy Moritz almost 10 yearsDoes Google Chrome still support this option? I'm seeing the option in the print dialog, but the background colors are still not showing up in the pdf
-
Neil Gaetano Lindberg over 4 yearsEquivalent with keeping media separated by style grouping:
<style type="text/css" media="print"> body { -webkit-print-color-adjust: exact; } </style>
-
Zze almost 4 yearsCan confirm that Chrome still supports
-webkit-print-color-adjust:exact;
. Works like a charm.