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?

CodePudding user response：

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.

CodePudding user response：

That's a very, very light gray. Choose a darker value and it will probably show up when you print.

CodePudding user response：

@media print {
    div{
        background-color: #dcdcdc;
    }
}