Best Ways To Get Around Css Backgrounds Not Printing

It often works out great that the CSS backgrounds don't print, however, sometimes I use them to convey contextual information. What is the best way for getting around CSS backgrou

Solution 1:

I've used borders to simulate backgrounds when I really need a background color. Something like this will work (but I apologize for not having tested this):

div.must-have-background-for-print {
    position: relative;
    width: 400px;
}
div.must-have-background-for-printdiv.background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-left: 400px solid #999;
}

In response to @Steve Quezadas' comment, the idea is that rather than using a background, you insert an element into the element that needs the background and apply an extremely wide border to it so that it fills the outer element. This will most likely require that the contents of that element also are inside of another wrapper so that they appear above the new background element...

If you started with this:

<divclass="has-background">Some stuff in here</div>

You might use this:

<divclass="has-background"><divclass="background" /><divclass="content">Some stuff in here</div></div>

This is extremely ugly, but I've used it in the past and it does solve the issue of background colors not printing. And, before you ask, you'll have to adapt the css to your specific case. I'm simply describing the concept of using borders to replace backgrounds. Your implementation will depend on how your page is structured and this is extremely difficult to do if you don't have either fixed widths or heights on your elements.

Solution 2:

Two suggestions:

1. Color-code text in the table rows
2. Add color-coded icons to the beginning or end of the table rows

You could even incorporate these into the normal view with your background colors.

Solution 3:

I ran into the same problem color coding tabular data in html, eventually I just switched to pdf generation for color printouts and only made black and white available in html

Solution 4:

It's a browser setting. Turn on background printing in IE. So, you can either change the browser settings (possible if on an intranet) OR just export your report to Excel or some other format for printing.

Solution 5:

You could make the font bigger and/or bold and/or italic and/or colorful.