CSS @media print issues with background-color;

Question

To enable background printing in Chrome:

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

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.

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

Try this, it worked for me on Google Chrome:

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

-webkit-print-color-adjust: exact; alone is Not enough you have to use !important with the attribute

this is printing preview on chrome after I added !important to each background-color and color attrubute in each tag

and this is printing preview on chrome before adding !important

now, to know how to inject !important to div's style, check out this answer I'm unable to inject a style with an “!important” rule