Background colors of CSS shapes not showing with window.print()

Author - Kritika Sood

In one of our projects we are working on, we were trying to print a page using Javascript window.print() method. Strangely the page was not showing the colors of various CSS shapes like rectangle, circle etc when print preview was shown. It was working when viewed on browser.

The solution we found was this:

Use !important in your CSS code while giving color to your HTML shape.

#rectangle
{
 position:relative;
 text-align:center;
 top:100px;
 margin-top:10px;
 padding: 8px;
 background:green !important;
 color:white !important;
font-weight:bold;
}

Webner Solutions is a Software Development company focused on developing CRM apps (Salesforce, Zoho), LMS Apps (Moodle/Totara), Websites and Mobile apps. If you need Web development or any other software development assistance please contact us at webdevelopment@webners.com

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *