Q:

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

I have some simple CSS:
#someElement {
    background-color:black;
    color:white;
}

It looks ok in the browser, but when I go to print it in Firefox it comes out as black text on a white background.  I imagine this is some sort of ink-saving feature, but is there any way around it?

A:

Its a browser setting. There is nothing you can do in your CSS. In Windows - File > Page Setup... > Print Background.

A:

I found a solution, it's a bit hacky, but with CSS pseudo elements you can create backgrounds using fat borders. Borders are printed even when "printing backgrounds" is off, just make them really thick! One note, Firefox sets all white font colors to black, so when you create a fake black background, Firefox still makes the text black, rendering the text invisible. Anyway here it is:
The HTML:
<div class="redBox">
  <div class="content">Black on red</div>
</div>

The css:
.redBox {
  /* o no, does not work with print */
  background-color: red;
}

@media print {
  .redBox {
     position: relative;
     overflow: hidden; /* this might not work well in all situations */
  }
  .redBox:before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     /* and here it is, the background color */
     border: 99999px red solid;
     z-index: 0; /* was required in my situation */
  }
  .redBox * {
    /* was required in my situation */
    position: relative;
    z-index: 1;
  }
}

A:

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.

