CODEWITHSUNDEEP
cssgoogle-chromefirefoxbackground-color
Wellington Zanelli
Wellington Zanelli

Reputation: 1964

Printing background-color in Firefox and IE

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.

Upvotes: 21

Views: 14524

Answers (5)

Pavel Levin
Pavel Levin

Reputation: 746

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

Browsers: Chrome, Safari, FireFox

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

Upvotes: 6

harsha motwani
harsha motwani

Reputation: 56

For Firefox

color-adjust:exact;

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

Upvotes: 1

voidstate
voidstate

Reputation: 7990

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)

Upvotes: 1

TheZver
TheZver

Reputation: 1582

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

Upvotes: 0

EGHM
EGHM

Reputation: 2140

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.

Upvotes: 5

Related Questions