Getting Chrome to Print with background colors enabled

Tue, 7 Aug 2012 • 5 comments

Chrome has a nice feature which allows it to "Print to PDF" without any native PDF print driver installed. This is really handy for taking "screenshots" of web pages to a portable format like PDF, however one thing which is frustrating is that background colors are forcibly removed for printing, even when printing to PDF.

This makes some sense when printing to a piece of paper, but is often not what you want for printing to PDF. Google has not provided an option to switch this behavior off, however there is a way around it.

Right click somewhere in the page
Click "Inspect Element"
Find the top level "<body ... >" tag in the HTML document
Double click and add this attribute:

style="-webkit-print-color-adjust:exact;"

e.g. the full tag might be:

Now when you print, background colors will not be modified.

About the Author

Richard Nichols is an Australian software engineer with a passion for good design and simple solutions.

You could follow him on twitter or subscribe by RSS or email.

You might also enjoy reading -

Discuss / Comment

There are 5 comments.

Kevin on Fri, 12 Oct 2012 at 23:03

I've tried this without any luck. Am I doing something wrong?

test
Kevin on Fri, 12 Oct 2012 at 23:04

oops! :)

<code>Test<code>
Kevin on Fri, 12 Oct 2012 at 23:07

Clearly I have no idea what I'm doing!!

>div class="span7" id="fid38" style="margin-top: 15px; margin-left: 2.0%; -webkit-print-color-adjust:exact;"/div<
Richard Nichols on Fri, 12 Oct 2012 at 23:30

@Kevin
I haven't tried applying it to anything other than the <code><body></code> tag, which worked for me. Not sure if there are limitations on what you can apply it to.
Mau on Mon, 6 May 2013 at 23:01

Thanks for the tip, but it just doesn't work. I have tried on the css, the html and no success. Must keep looking.

Add a comment