Printing background images

This is a nice little hack to print background images which are not printed by default by browsers. Normally you’d use the image tag but this little fix uses list-style-image instead.

So, lets say you’ve got an identifier setup called logo, in the print CSS you need to do this

#lo\go {
display: list-item;
list-style-image: url(logo.gif);
list-style-position: inside;
height: 39px;
width: 125px;
}

It apparently works in IE6, Firefox 1.0 and 1.5, Opera 8.5 and Safari. Pretty neat huh? A full explanation can be found here.