css media type print using background-color in chrome

Question

I am using the background-color property in CSS media type print.

The problem is that Google Chrome does not show background-color or background-image in print preview.

How can this be solved?

Answer 1

Chrome supports control of background colour / image printing via CSS. You can set the following CSS property on elements whose background should be printed:

-webkit-print-color-adjust: exact; 

Normally of course, this is determined by browser settings - but Chrome allows web designers to determine how backgrounds are printed on a per-element basis...

Notes:

• Requires Chrome 17 or higher.
• The background of the body tag is not printed.

Thanks to Cron’s Web Tech Blog, where I first spotted it:-

http://blog.crondesign.com/2011/11/print-css-backgrounds-in-google-chrome.html

Also, this leads to some background (no pun intended!) info regarding the feature:-

http://code.google.com/p/chromium/issues/detail?id=107763

Hope this helps...