Every website needs a print style sheet, especially informative websites. I thought about a little trick, to give you printed page the logo and/or url, or whatever picture you would like to see on the printed paper.
Make a image in Photoshop that you want to be printed. You can use your company logo and/or the url.
1. At the print.css somewhere between the
<link href="/css/print.css" rel="stylesheet" type="text/css" media="print" />
2. Insert this code in your html/php/aspx/… file:
<div id="print-logo"><img src="/img/YOUR-IMAGE.gif" alt="Whatever" /></div>
OR a better solution is
<img src="/img/YOUR-IMAGE.gif" alt="Whatever" id="print-logo" /> (thanks Nathan)
You can place this code wherever you want, I prefer after the
<body>-tag of before the
</body>-tag. This way, your logo will be presented at the top or bottom of your entire content.
3. Insert this code in your general style sheet:
4. Insert this code in your print style sheet:
If someone prints your webpage, your logo and/or url is displayed on the printed page. Here are some examples that I made:
You can find a lot of free icons on the web, check the post of Smashing Magazine “Freebies Round-Up“
If you define your print style sheet, don’t forget to define your body tag font size and font family. It’s more fun to read Tahoma or Arial, then Times New Roman.
Only print what is necessary. Navigation, footer or header are necessary in your website, but when you print a webpage, you only need the important content parts.