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.

Meltage

No one? Please, please help me sharing this post... – Meltage

I added a hack here: #765020 – Crusade

Possible duplicate of CSS @media print issues with background-color; – Frieder

Answer 1

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

Browsers: Chrome, Safari, FireFox

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

Invitation

IE - No. Edge (75+) - Yes – Invitation

Answer 2

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.

Aimee

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

unfortunately, this is not possible without user interraction. html printing is really limited. – Stank

Answer 3

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)

Pasley

Answer 4

For Firefox

color-adjust:exact;

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

Angloamerican

Answer 5

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

Madox