Print Background colours in Chrome

Question

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?

http://superuser.com/questions/117162/printing-background-colours-in-chrome — random, Mar 23 '11 at 23:10
Chrome now allows `-webkit-print-color-adjust:exact;` in the element CSS to print the background. — Eduardo Molteni, Aug 08 '12 at 14:20
See similar question http://stackoverflow.com/questions/5355117/print-css-backgrounds-in-safari-chrome/9339257 — Julien Kronegg, Mar 28 '13 at 07:14

score 109 · Accepted Answer · edited May 23 '17 at 12:26

109

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.

edited May 23 '17 at 12:26

Community

1
1

answered Mar 06 '10 at 11:57

Gordon

312,688
75
539
559

1

Also, keep in mind that a vast majority of browsers disables background colors and images by default. – Xr. Mar 06 '10 at 11:59
Thank you for that tip Eduardo! – danielmesh Feb 20 '13 at 22:02
17

Does 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 – Jeremy Moritz Aug 30 '14 at 18:30
3

Can confirm that Chrome still supports `-webkit-print-color-adjust:exact;`. Works like a charm. – Zze Aug 16 '20 at 20:57

score 36 · Answer 2 · answered Oct 14 '16 at 17:58

36

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).

answered Oct 14 '16 at 17:58

Brent Bradburn

51,587
17
154
173

1

Equivalent with keeping media separated by style grouping: `````` – Neil Gaetano Lindberg Oct 28 '19 at 18:57

score 5 · Answer 3 · answered Feb 24 '20 at 23:58

5

Chrome > Print (cmd P) > click More Settings > Options: check Background graphics

answered Feb 24 '20 at 23:58

Geoffrey Hale

10,597
5
44
45

Print Background colours in Chrome

3 Answers3

Linked

Related