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?

I suggest @musa answer should be accepted instead of the current one, as it really solves the problem. — Namatullah Shahbazi, Aug 24 '16 at 10:45
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). — machineghost, Aug 24 '16 at 22:42
Firefox will [now recognize the `color-adjust` property](https://stackoverflow.com/questions/35004690/force-background-color-printing-on-firefox/39710495#39710495). 'color-adjust: exact'; There is an answer below that mentions that which should now be selected as the correct answer. — RustyToms, May 08 '17 at 01:22

score 45 · Answer 1 · answered Apr 19 '09 at 00:06

45

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

answered Apr 19 '09 at 00:06

Daniel A. White

187,200
47
362
445

Is there a way with javascript to detect if this setting is on or off? – jdavis Jul 28 '14 at 15:55
@jdavis no i do not think so. – Daniel A. White Jul 28 '14 at 15:55
As I have mentioned in my answer, there is a better solution to do it – Musa Haidari Aug 24 '16 at 10:46
1

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). – Michal Skop Mar 23 '17 at 04:14
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 – Naxos84 Jun 01 '17 at 08:57
@Naxos84 i dont think so. thats all controlled by the browser – Daniel A. White Jun 01 '17 at 11:07
This changed nothing for me unfortunately. – Euri Pinhollow Jul 01 '18 at 13:43

score 31 · Answer 2 · edited Apr 17 '15 at 16:22

31

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

edited Apr 17 '15 at 16:22

Blazemonger

90,923
26
142
180

answered Mar 25 '14 at 10:59

timing

6,340
1
17
16

1

If you set `z-index: -1` instead of `0` you could save up the `.redBox *` part. – kernel Jan 07 '15 at 15:07
@kernel That worked for me, but I think you need to set the background of `.redbox` transparent for print as well. – Blazemonger Apr 17 '15 at 16:24
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 May 12 '15 at 11:15
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 http://jsfiddle.net/67k4Lvn9/2/. At least worked on Google Chrome 42.0.2311.135 and Firefox 37.0.2. – Ismael Miguel May 12 '15 at 11:31
@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 – John Demetriou May 25 '15 at 08:04

Musa Haidari · Answer 3 · 2016-08-23T04:11:50.767

25

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.

edited Aug 23 '16 at 04:11

answered Dec 20 '15 at 09:43

Musa Haidari

2,109
5
30
53

May not work on all browsers, but fixes FF text colors. – Poelinca Dorin Jun 28 '16 at 10:32
1

Works for background, don't forget to add `:` after `box-shadow` in style definition – userlond Aug 22 '16 at 08:06
@userlond Thank you for the fix. – Musa Haidari Aug 23 '16 at 04:13
2

I like this CSS-only solution since it doesn't need me to alter the DOM. – leemes Sep 19 '16 at 11:27
2

Note this does not currently work in Chrome (the box shadow is printed as solid black). – roflmyeggo Mar 30 '17 at 16:07
1

For now you can work around this issue in Chrome by using `-web-filter: opacity(1)` but this will result in some pixelation. – roflmyeggo Mar 30 '17 at 19:04

score 23 · Answer 4 · answered Jun 14 '19 at 00:46

23

For show background colors in firefox & IE

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

answered Jun 14 '19 at 00:46

DhineshYes

1,008
11
12

score 20 · Answer 5 · answered Apr 13 '17 at 19:03

20

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

answered Apr 13 '17 at 19:03

Ricky Boy

723
7
7

3

This is a new feature in Firefox, and this is now the correct answer. [Using the color-adjust property](https://stackoverflow.com/questions/35004690/force-background-color-printing-on-firefox/39710495#39710495) – RustyToms May 08 '17 at 01:20

score 2 · Answer 6 · answered Jan 07 '19 at 06:56

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)

score 1 · Answer 7 · answered Sep 24 '18 at 16:02

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>

Arve Systad · Answer 8 · 2009-04-19T01:30:26.903

-1

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

edited Apr 19 '09 at 01:30

answered Apr 19 '09 at 01:23

Arve Systad

5,471
1
32
58

Heh, a whole page would be excessive; I only wanted a small area. – machineghost Apr 19 '09 at 06:19
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? ;-) – Arve Systad Apr 19 '09 at 12:31
7

how does this solve the generic background color issue? – Ben Sewards Nov 17 '15 at 14:23

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

8 Answers8

Linked