CODEWITHSUNDEEP
cssgoogle-chrome
James
James

Reputation: 237

css media type print using background-color in chrome

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?

Upvotes: 21

Views: 14433

Answers (4)

Yuji 'Tomita' Tomita
Yuji 'Tomita' Tomita

Reputation: 118458

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

Upvotes: 14

tranquil tarn
tranquil tarn

Reputation: 1756

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

Upvotes: 38

Baldrick
Baldrick

Reputation: 24340

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"

Upvotes: 4

Benny Han
Benny Han

Reputation: 84

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.

Upvotes: -1

Related Questions