How do I Make Firefox Print a Background-Color Style?

Question

I have some simple CSS:

#someElement {
    background-color:black;
    color:white;
}

It looks ok in the browser, but when I go to print it

Answer 1

There is a simple solution for this.

For background-color, instead of using:

background-color: red

Use:

background-color: unset;
box-shadow: inset 0 0 0 1000px red /* 1000px is a random high 
                                     number that is definitely 
                                     larger than the box dimension*/

---

Also for color, instead of:

color: grey;

Use:

color: unset;
text-shadow: 0 0 grey;

---

You may restrict them to print only by using @media print, but you do not have to!

---

Note: Sometimes you should use background-color: transparent; or color: transparent; if the color or background-color are inherited from parent elements.

Answer 2

This is how I made it to work in my case by adding the below two lines to the particular div. "@@supports (-moz-appearance:meterbar)" is helpful to add styles specific to Firefox.

-webkit-print-color-adjust: exact; color-adjust: exact;

@@supports (-moz-appearance:meterbar) {
    .container {
        margin: 0;
        font-size: 0.85em;
        width: 100%;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}