Firefox not printing white color

Question

I have a page where I am printing a <h2> with white color.

When I try to print that <h2> in other color like red, green, blue etc. It prints correctly (correct color), but when I add code to print it in white color it changes and prints in black.

.text-container {
  position: relative;
}

.text {
  position: fixed;
  width: 100%;
  bottom: 0;
  background-color: #000000 !important;
  opacity: 0.5;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

h2,
h3 {
  color: #ffffff !important;
  margin: 0.05208in;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

<div class="text-container">
  <div class="text-center text">
    <h2>Som Text</h2>
    <h3>Some more text</h3>
    <h3>Some more text</h3>
  </div>
</div>

This is my code. Even I test text with simple <p> tag it reflects the same issue. It works perfectly on chrome.

`h2, h3 {color: #fff !important;}` would be better - less chars :) - more importantly, if you inspect the h2 element in the browser, does it show the style being overriden? — treyBake, May 17 '17 at 12:57
When you say _"print"_ do you mean physically? or digitally? — evolutionxbox, May 17 '17 at 12:58
@evolutionxbox I am just testing the feature so saving as pdf front the print dialogue on my Linux machine. — Jnanaranjan, May 17 '17 at 13:01
@Jnana [would this question help you](http://stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color)? — evolutionxbox, May 17 '17 at 13:02
My background color is printing well. I have gone through that post, but no luck. — Jnanaranjan, May 17 '17 at 13:14

Alireza · Accepted Answer · 2017-05-17T13:34:50.753

3

Also add !important to -webkit-print-color-adjust. This should work in all firefox, put it in @media print like this...

@media print {
  h2, h3 {
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    }
}

If still you want exact colour, you should check it in the printer, Appearance and Print Background Colors, by default it's off, look at the image, this worked for me, check it in your printer window setting as the below:

edited May 17 '17 at 13:34

answered May 17 '17 at 13:12

Alireza

100,211
27
269
172

You have put a "`" mark on your code. I have tried this but it is not working as well. – Jnanaranjan May 17 '17 at 13:19
That was extra, did you try @media print wrapper around your code with !important? – Alireza May 17 '17 at 13:20
Yes the whole code is within @media print wrapper. The code is working perfectly for chrome. Issue while printing white color only on firefox. – Jnanaranjan May 17 '17 at 13:21
OK, I updated the answer, try this please, it worked for me on MAC for firefox – Alireza May 17 '17 at 13:35
Yes, It worked. But I wanted to do something which automatically makes the system to print the colors. Thank You – Jnanaranjan May 18 '17 at 10:49
I know, but unfortunatelly you can not fully override the default behaviour of the printer using CSS... unfortunatelly these kinds of things can not be fully managed by CSS – Alireza May 18 '17 at 15:00

Firefox not printing white color

1 Answers1