CODEWITHSUNDEEP
htmlcssbrowserprinting
Sarfraz
Sarfraz

Reputation: 382696

TDs background color not visible in print preview

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

Upvotes: 7

Views: 7396

Answers (4)

Pete Fecteau
Pete Fecteau

Reputation: 302

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.

Upvotes: 3

Marco Bettiolo
Marco Bettiolo

Reputation: 5171

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;

Upvotes: 12

Gazzer
Gazzer

Reputation: 4646

Try using CSS if you can and if the background doesn't work with the print version specify a print css document.

<link rel="stylesheet" rev="stylesheet" href="style.css" type="text/css" media="all" /> <link rel="stylesheet" rev="stylesheet" href="print.css" type="text/css" media="print" />

Basic CSS here:

td{ background-color:#FF0000; }

Upvotes: 0

Doug Neiner
Doug Neiner

Reputation: 66191

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.

Upvotes: 4

Related Questions