TDs background color not visible in print preview

Question

I have td like this:

<td align="left" bgcolor="#FF0000">

In browsers, there is a red background color applied to it but when i see print preview of this, there is no red color in the background. also the font color is white but it also gets converted to white when print previewing it.

Anyone knows what can be the reason?

Thanks

Answer 1

To make WebKit browsers (Safari, Google Chrome) print the background image or color you should add the following css style to the element:

-webkit-print-color-adjust: exact;

Answer 2

The printing of background colors is supported differently by each browser, and it is often off by default. For instance, in Safari, it is an option in the print dialog called "Print Backgrounds". I am not sure where the option is in other browsers.

Answer 3

I just ran into this issue myself and believe I have a solution. I originally did this with an H1 tag but then used the same code for a TD

h1 {
    background-color:#404040;
    background-image:url("img/404040.png");
    background-repeat:repeat;
    box-shadow: inset 0 0 0 1000px #404040;
    border:30px solid #404040;
    height:0;
    width:100%;
    color:#FFFFFF !important;
    margin:0 -20px;
    line-height:0px;
}

Here are a couple things to note:

• background-color is the absolute fallback and is there for posterity mostly.
• background-image uses a 1px x 1px pixel of #404040 made into a PNG. If the user has images enabled it may work, if not...
• Set the box-shadow, if that doesn't work...
• Border = 1/2 your desired height and/or width of box, solid, color. In the example above I wanted a 60px height box.
• Zero out the heigh/width depending on what you're controlling in the border attribute.
• Font color will default to black unless you use !important
• Set line-height to 0 to fix for the box not having physical dimension.
• Make and host your own damn PNGs ;)

See my fiddle for a more detailed demonstration.