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?

Furbelow

I suggest @musa answer should be accepted instead of the current one, as it really solves the problem. – Dosia

Hmmm ... timing's answer came almost two years before mursa's, and both answers use the same basic principle (ie. use something besides background-color to fake a background color). Timing's answer has more explanation, but mursa's is simpler ... I wish one was clearly better, but given all that I'm honestly not sure which one I should accept. For now I have just removed the checkmark from Daniel A. White's answer (while it's technically accurate, people on SO are looking for solutions). – Furbelow

Firefox will now recognize the color-adjust property. 'color-adjust: exact'; There is an answer below that mentions that which should now be selected as the correct answer. – Medical

Answer 1

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

Huggins

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

@Puncheon no i do not think so. – Huggins

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

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). – Leyte

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 – Virge

@Virge i dont think so. thats all controlled by the browser – Huggins

This changed nothing for me unfortunately. – Assure

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

Kaikaia

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

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

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.) – Chance

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. – Chance

@Kaikaia 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 – Kooky

Answer 3

For show background colors in firefox & IE

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

Yl

Answer 4

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.

Habitude

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

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

@Dismuke Thank you for the fix. – Habitude

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

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

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

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

Uric

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

Answer 6

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)

Buskin

Answer 7

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>

Orthodox

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

Terrence

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

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? ;-) – Terrence

how does this solve the generic background color issue? – Refugiorefulgence