Printing background-color in Firefox and IE

Question

I am with some problems to print background-color in Firefox and IE. For Google Chrome I found the follow hack and it works well, but for Firefox and IE I can't find anything.

//Hack for Google Chrome
-webkit-print-color-adjust:exact;

I am glad if someone can help me with this.

I added a hack here: http://stackoverflow.com/questions/764520/how-do-i-make-firefox-print-a-background-color-style/22632508#22632508 — timing, Mar 25 '14 at 11:00
Possible duplicate of [CSS @media print issues with background-color;](http://stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color) — f_puras, Feb 11 '16 at 10:19

score 5 · Answer 1 · answered Aug 09 '13 at 07:54

5

For Firefox on the Print dialog there is an Advanced or Show Details button, if you click that , under Appearance there are two checkboxes. One for Print Background Colors and Print Background Images.

answered Aug 09 '13 at 07:54

EGHM

2,144
23
37

3

Thanks your answer, but I need something that not depends of the user, something in the application to print it automatically, like the hack to Google Chrome. – Wellington Zanelli Aug 09 '13 at 11:19
unfortunately, this is not possible without user interraction. html printing is really limited. – Pierre Gayvallet Sep 23 '14 at 13:11

score 5 · Answer 2 · answered Aug 29 '17 at 17:00

5

* {
-webkit-print-color-adjust: exact;
printer-colors: exact;
color-adjust: exact;}

Browsers: Chrome, Safari, FireFox

More: https://wiki.csswg.org/ideas/print-backgrounds

answered Aug 29 '17 at 17:00

Pavel Levin

646
8
7

1

IE - No. Edge (75+) - Yes – Pavel Levin Jun 20 '19 at 07:54

voidstate · Answer 3 · 2015-10-07T08:54:04.690

If you are OK with having your element being a fixed height/width, you can set its size, put a 1px coloured image into it (of whatever colour you want the background to be) and make it fill the space. Then you can absolutely position your content on top.

<div style="position: relative; width: 100px; height: 100px;">
    <img src="/images/blue.png" style="width: 100px; height: 100px;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello world
    </div>
</div>

Or you could do the same thing with a border instead of an image:

<div style="position: relative; width: 100px; height: 100px;">
    <div style="width: 0; height: 0; border: 50px solid black;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello world
    </div>
</div>

(Original idea from here: https://defuse.ca/force-print-background.htm)

score 1 · Answer 4 · edited Jul 14 '17 at 11:07

1

For Firefox

color-adjust:exact;

will work same as -webkit-print-color-adjust:exact;

edited Jul 14 '17 at 11:07

Floern

33,559
24
104
119

answered Jul 14 '17 at 10:38

harsha motwani

56
4

TheZver · Answer 5 · 2014-09-30T09:47:37.920

0

Seems impossible, as Spark says, but you can sometime use wide borders as workaround (e.g. div with 0 height and 100px border).

edited Sep 30 '14 at 09:47

answered Sep 30 '14 at 09:38

TheZver

1,502
2
14
19

Printing background-color in Firefox and IE

5 Answers5

Linked