6

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.

user2029716
  • 81
  • 2
  • 3
  • 5
  • Possible duplicate: [How can I print background images in FF or IE?](http://stackoverflow.com/q/596876/1456376). – insertusernamehere Feb 02 '13 at 08:40
  • Possible duplicate: [CSS property print-color-adjust for non-webkit browsers](http://stackoverflow.com/questions/12730331/css-property-print-color-adjust-for-non-webkit-browsers) – rubo77 Feb 02 '13 at 09:18
  • 1
    best so far: https://defuse.ca/force-print-background.htm – Teson Sep 24 '13 at 08:32

3 Answers3

9

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.

rubo77
  • 19,527
  • 31
  • 134
  • 226
  • I think this is the correct answer, although the other answers have some useful information - but just not the answer to the question – rubo77 Feb 09 '13 at 11:16
  • 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. – Jānis Gruzis Oct 02 '13 at 11:46
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.

patstuart
  • 1,931
  • 1
  • 19
  • 29
-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

user2031802
  • 744
  • 8
  • 7