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

For show background colors in firefox & IE

@media print {
  body{
    -webkit-print-color-adjust: exact; /*chrome & webkit browsers*/
    color-adjust: exact; /*firefox & IE */
  } 
}

Answer 2

I've hacked this by using SVG element

.legendItem {
  position: relative;
}

.legentItemText {
  position: relative;
  z-index: 1;
}

.printBackground {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 0;
}

  <div class="legendItem">
    <div class="legentItemText">Some text.....<div>
  <svg class="printBackground">
    <rect width="100%" height="100%" fill="#000" />
  </svg>
</div>

Answer 3

Maybe not the answer you're looking for, but here goes:

I'd rather add a separate stylesheet for printing the page. Typically, you would want to remove things like navigation menus, breadcrumbs, ads, and maybe do some small changes in margins, paddings, borders and fonts compared to the on-screen stylesheet.

Even thinking about forcing the user to fill a whole page with black ink with white text seems silly to me.

To add a separate print stylesheet, add another stylesheet to the head of your page.

<link rel="stylesheet" href="print.css" type="text/css" media="print">

Answer 4

For chrome you can use this:

-webkit-print-color-adjust:exact;

Or in print preview, tick the More settings->Background Graphics

For Firefox, you can't enable it using any CSS. You can enable it as follow (If you don't see the File, press Alt key once).

File->Page setup and tick the Print Background(color & images)

Answer 5

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

Answer 6

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;
  }
}