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.