Print webpage with background images and colors?

Question

How can i print a webpage exactly how it looks like -- I mean with background images and colors?

(In IE)

Best Zeesahn

Answer 1

In IE this is configurable from the browser. Check this tutorial for the details. Though I suspect you are looking for a css solution. I have not been able to accomplish this in a consistent fashion.

This is probably the best solution I have come across. It involves list-style... rules to attempt to get the job done. good luck.

Edit - pulled from web-graphics.com

#ti\tle {                            /* 6. */
  display: list-item;                /* 1. */
  list-style-image: url(banner.jpg); /* 2. */
  list-style-position: inside;       /* 3. */
  letter-spacing: -1000em;           /* 4. */
  font-size: 1pt;                    /* 5. */
  color: #fff;                       /* 5. */
}

Some annotations:

1. We give our h1 the characteristics of a list-item.
2. We pretend our banner image is a list-style-image.
3. Firefox wants you to put the image inside.
4. We make the text disappear into a black hole by means of Malarkey's Image Replacement (MIR).
5. As MIR doesn't work in Opera, we set the font-size to 1pt and make the text white. This works fine with Opera's default print settings. Other image replacement techniques rely on moving or hiding mechanisms, all of which would also hide our image. Hence small, white text.
6. As list-style-image is not supported in IE5 and IE5.5, we exclude these browsers with a simple escaping hack.

That's all. It works in IE6, Firefox 1.0 and 1.5 and Opera 8.5 - don't know about Safari, but I expect no problems. Konqueror 3.5 shows a black "H" just below the banner - however, the