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.

Bathometer

Possible duplicate: How can I print background images in FF or IE?. – Farceuse

Possible duplicate: CSS property print-color-adjust for non-webkit browsers – Ynez

best so far: defuse.ca/force-print-background.htm – Adriell

Answer 1

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.

Ynez

I think this is the correct answer, although the other answers have some useful information - but just not the answer to the question – Ynez

This option also is available only in latest webkit browsers. No support for ones before about 2013 and it could be a bit buggy as mentioned in upper link. – Gambado

Answer 2

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.

Dissuasion

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

Schwartz