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 anythi

Answer 1

For Firefox

color-adjust:exact;

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

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.

Answer 3

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

Browsers: Chrome, Safari, FireFox

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

Answer 4

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)

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