Background colors and print

 Again i am continuing print related issues in web world. Today I am coming with interesting issue of printing web page which has got background color inside the page.

CodePen Code:

See the below codepen example which has got one box with light background color.  Switch to css tab see the css and switch to result for result. See the result on full view on http://codepen.io/vipul_patel_08/full/vxrwRx/   it.

Note :  Please view result in desktop browsers as codepen works in iframe and it prints entire page weirdly.

Result :

Click on print button on full view page ( http://codepen.io/vipul_patel_08/full/vxrwRx/)of result. Check on any browser.

I can not see light background color in box !!! What is this!!! I want my end user to see the important of this box so i put light background color. But see I can not see the same on print page.

Reason :

All browser has got default settings for not to print any background colors and images while printing to save the INK.  If you want to print background graphics then you need to turn it on. Every browser has got that setting. Try in chrome. There is checkbox

But being web developer i know this setting option. How would end user know this?? I want my important box to be printed with background color as i want to highlight end user of importance of that box text. Webkit browser gives one property. If -webkit-print-color-adjust: exact; set then it prints background color but this only for webkit browser. Safari and chrome work fine with this attribute. but what about others browsers????

We do not have any property for other browser. I have solution which works fine except IE. So lets apply that.

Apply shadow instead background for box and fill entire box with shadow and you know what all browsers except IE does print shadow. Lets fill box with shadow which looks like shadow..

Demo with shadow :

I just filled box with same background color under print media. box-shadow: inset 0 0 0 1000px #f7fcff;  See the magic. it prints the background color in all browser. Chrome,Safari, Mozilla tested.

Please see on full page result on http://codepen.io/vipul_patel_08/full/bqjNwV/  and do the print. 

It works like charm!!!!

@media print {
  .card {
    box-shadow: inset 0 0 0 1000px #f7fcff;
  }
}

Conclusion:

All browser has default setting for not to print background graphics. Our end user does not know this. We should design our page which is going to be printed by end user such way that it should not have any backgrounds colors. If backgrounds colors are there then it should be very minimum. Like i said if you want to highlight something to end user then you required background color. So apply above fix and end user could see same highlighter in their print.  IE does not print even shadows. Cant do much except turning settings on.