darkchampionz
darkchampionz

Reputation: 1234

CSS - Gray color turns into white at printing

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?

Upvotes: 3

Views: 838

Answers (2)

ANAGH K R
ANAGH K R

Reputation: 114

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

Upvotes: 0

dave
dave

Reputation: 2911

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.

Upvotes: 5

Related Questions