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?

Solution 1

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

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

Solution 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:

background-color: transparent;

color: transparent;

color

background-color

Solution 4

For show background colors in firefox & IE

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

Solution 5

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

View more solutions

Comments

[machineghost]

Heh, a whole page would be excessive; I only wanted a small area.

[Arve Systad]

That might just be, but keep in mind it's the exact same mechanism that controls it. Should the browser detect the surface area in the website, check it against desired DPI settings somewhere for print and THEN decide wheather or not to apply the BG-color? ;-)

[jdavis]

Is there a way with javascript to detect if this setting is on or off?

[Daniel A. White]

@jdavis no i do not think so.

[kernel]

If you set z-index: -1 instead of 0 you could save up the .redBox * part.

[Blazemonger]

@kernel That worked for me, but I think you need to set the background of .redbox transparent for print as well.

[Ismael Miguel]

I know that this is an old answer, but try using 9999cm instead of px. (I experimented with this and that's the only unit that worked. 10000cm won't work.)

[Ismael Miguel]

After some testing, I've found that the absolute maximum (I spent my time to find) was 5585.70776367in (~14299.4118749952cm). You can try on jsfiddle.net/67k4Lvn9/2. At least worked on Google Chrome 42.0.2311.135 and Firefox 37.0.2.

[John Demetriou]

@timing although your method works and the "background" is printed, the content of the div is not shown, I tried using z-index but still not visible, It is shown on screen though

[Ben Sewards]

how does this solve the generic background color issue?

[Poelinca Dorin]

May not work on all browsers, but fixes FF text colors.

[userlond]

Works for background, don't forget to add : after box-shadow in style definition

[Musa Haidari]

@userlond Thank you for the fix.

[Musa Haidari]

As I have mentioned in my answer, there is a better solution to do it

[leemes]

I like this CSS-only solution since it doesn't need me to alter the DOM.

[Michal Skop]

It is now directly in the Print... -> Options (tab) -> Print Background Colors. It seems to me more universal than what Musa or timing suggest, because it can be applied also for webpages you cannot edit (you are not their owner).

[roflmyeggo]

Note this does not currently work in Chrome (the box shadow is printed as solid black).

[roflmyeggo]

For now you can work around this issue in Chrome by using -web-filter: opacity(1) but this will result in some pixelation.

[RustyToms]

This is a new feature in Firefox, and this is now the correct answer. Using the color-adjust property

[Naxos84]

Is there a way to set this up when I use onload="window.print();? cause the browser settings only work when I use the browser "print" button

[Daniel A. White]

@Naxos84 i dont think so. thats all controlled by the browser

[Euri Pinhollow]

This changed nothing for me unfortunately.