HTML/CSS - Styling for print, background color and image would not show in IE and Firefox?

Question

how can i show the background color and image while printing, i knew it this is the browser properties but i want to complete it from CSS such as i use for webkit -webkit-print-color-adjust: exact; so how can i achieve it.

Answer 1

Google Maps and Bing Maps use a CSS hack involving really large table cell borders and negative margins. Most other sites haven't yet implemented this hack.

I can't find any documentation on how to recreate this, however, if the reader is willing to look closely at the DOM of the printouts on either of those sites, s/he will find a way around the restrictions.

Answer 2

No, it is not possible, see: -webkit-print-color-adjust

The -webkit-print-color-adjust property is a non-standard CSS extension that can be used to force printing of background colors and images in browsers based on the WebKit engine.

There is no such solution for Firefox or IE.

The only solution there is to uncheck the checkbox "Print background colors" in the print dialog manually.

Answer 3

Use CSS @media to set style for different devices

@media print Used for printers

@media screen Used for computer screens

---

some easy readings are as follows

http://www.w3schools.com/css/css_mediatypes.asp

https://developer.mozilla.org/en-US/docs/CSS/@media