CSS - Gray color turns into white at printing

Issue

div {
  background-color: #dcdcdc;
}

The above has a nice gray color on screen but when I try to print it, it results in a white. How do I fix this?

Solution

Use color-adjust in your CSS to tell the user agent to print background colours:

div {
  -webkit-print-color-adjust: exact !important;
  background-color:#dcdcdc !important;
}

You might also need to enable background graphics in your printing settings in your browser. In Chrome it's

• Open your Chrome browser and go to File > Print.
• In the left-hand menu, click on More settings.
• Scroll down until you find the Background graphics checkbox.
• Click the checkbox to activate background graphics.

Answered By - dave