Part of your website development process should include coding and testing a print stylesheet. One thing that took me a long time to figure out is how to properly insert a logo at the top of the page. The technique is very easy.

Two things are tricky about printer-friendly logos:

1. Logos are typically background images and print stylesheets don't print background images
2. Often times the logo is over a colored background, which you don't want on white paper, so you need to specify a different image for printing

The code I use will work every time, no matter what the website looks like in a browser. Start with the following at the top of your layout in the main container:

<img src="/images/print-logo.png" alt="Website/Company Name" 
id="printLogo" />

Your main stylesheet should have the following:

#printLogo {
	display:none;
}

Your print stylesheet should have the following:

#printLogo {
	display:block;
}

Easy, right? For the longest time I was looking for a way to do this without adding an image to the top of the layout, but I've found this to be the most consistent, reliable method.

A nice looking print stylesheet is a huge wow-factor; especially when you have taken the time to add the logo to the top. Here are a few examples of sites we have done that have the two different logos: