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-colo

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

Answer 2

I think the issue is not with your code, but with Chrome: there is no option to print background (images or colors) : see http://www.google.com/support/forum/p/Chrome/thread?tid=17a4ac343580c8d3&hl=en

With Firefox, the background images are not printed by default, but it can be activated in "Print... -> Page setup"

Answer 3

You can try the developer tools in chrome to check which css rules applied in your DOM element. That will help you debug and fix the issue.

Answer 4

I tried for hours using the ideas suggested but none worked. I needed to use !important

Somehow chrome must be deferring to a different background-color statement.

background-color:red !important