CSS @media print issues with background-color;

I'm new here at this company and we have a product that uses miles of css. I'm attempting to make a printable stylesheet for our app but I'm having issues with background-color in @media print.

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

Everything else works, I can modify the borders and such but background-color won't come through in the print. Now I understand that y'all might not be able to answer my question without more details. I was just curious if anyone had this issue, or something similar, before.

Solution 1:

To enable background printing in Chrome:

body {
  -webkit-print-color-adjust: exact !important;
}

Solution 2:

IF a user has "Print Background colours and images" turned off in their print settings, no CSS will override that, so always account for that. This is a default setting.

Once that is set so it will print background colours and images, what you have there will work.

It is found in different spots. In IE9beta it's found in Print->Page Options under Paper options

In FireFox it's in Page Setup -> [Format & Options] Tab under Options.

Solution 3:

Got it:

CSS:

box-shadow: inset 0 0 0 1000px gold;

Works for all boxes - including table cells !!!

• (If the PDF-printer output file is to be believed..?)
• Only tested in Chrome + Firefox on Ubuntu...

Solution 4:

Try this, it worked for me on Google Chrome:

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>