Printing Color Backgrounds

Can't do it? Not! What's your trick?

[rmplmn]

So background images and color are ignored when printing but you want to print text over a color background (or image) anyway. What is the best way to get it done?

A background image seems pretty simple, you just z-index your text layer over the image layer. What do you do if you just want a flexible color layer? My thought is to create a layer with a sufficiently wide color border.

This works in my limited testing but what are the pitfalls and is there a better way?

[Chpunka]

I have come across this and I remember having the problem in the past.

When you specify the CSS are you adding the media type.

<style type="text/css" title="text/css" media="all">
.theBlocktoPrint
{
background-color: #000;
color: #FFF;
}
</style>

I am not 100% sure and it would be better to get a second opinion but I think I recall the media type effected the way the page printed out.

[rmplmn]

I am using the print media type. It is not a question of whether backgrounds print, they don't (please correct me if I'm wrong), but rather what is the best work-around.

Thank you though.

[benihana]

what are the pitfalls

main pitfall i can think of is on the users end.

Ink is expensive....

[rmplmn]

If that's the only pitfall, I'm home free!

I'm just the production, the brains want color, period. Besides, the user can always choose to print in B/W and we're not doing an intense design just enhancing with color.

Thanks.

[choster]

It is up to the user. Period.

When we absolutely need to provide a background, e.g. for branding on key products, we link "print version" to a PDF. In other cases we simply put the background color into a foreground graphic. Neither solution is as usable or search-engine friendly, but the marketing department will be happier.

[rmplmn]

It's all about the marketing department. Oy! My original print version looked great in B/W but in review... "Where's the color?"

Do you think there is any advantage to printing from a PDF if I can reproduce a printable HTML version that looks extacly the same? I'm thinking maybe the color is reproduced more accurately but I haven't tested.

In the absence of a significant advantage, I would rather produce a single HTML file with a print media-type stylesheet than have two separate documents (and have to re-create PDFs everytime there is a little change).

Thanks for your thoughts.

[chadmg]

In Internet Explorer, go to Tools > Internet Options > Advanced Tab > Scoll down to Printing and select the "Print background colors and images" option. Always leave it up to your user. Don't piss off your customers or clients.

Now, I'll get off of my soap box. If you still need to do it, because sometimes we need to do things we don't want to, you can use css media=print to add z-indexes to your elements and change images from display:none to display:inline or display:block. Like so:

<style type="text/css">
h1 { background-image: url('whatever.gif'); }
img.h1 { display: none; }

@media print {
h1 { background-image: none!important; z-index: 2!important; }
img.h1 { display: inline!important; z-index: 1!important; }
}

<h1><img src="whatever.gif" class="h1">This is a title with a background</h1>

Please note that I just threw this together and didn't check it at all. You would also need to change the relative positioning of the h1 text.

Also note that there are also problems with printing z-indexes. I've narrowed it down to bad print drivers on select printers. So just because it prints fine for you, it doesnt mean it will print the same way for everyone else. That's why people use PDF's so it always prints the same way. You could also replace the whole text over the image (or color) with just a static image.

I still say just let people print how they want to print. Don't force people to waste their ink.

[rmplmn]

Thanks for the soap box. Duh, I knew that! Boy do I feel silly. Your entire response was exactly what I was looking for.

Thanks again.

[chadmg]

No problem. That's what WebmasterWorld is here for. :)