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 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?

Answer 1

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

Answer 2

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

Answer 3

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 4

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

Answer 5

For show background colors in firefox & IE

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

Answer 6

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 7

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 8

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">