Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Black and white logo for your print stylesheet

9:02 am on Apr 24, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
votes: 0

Hey all, thought I'd share this trick I used recently. The design called for a fairly designed print stylesheet for each of the pages, which I OKed. I didn't, however, notice that the logo had changed from colour to black+white for the printable version.

In print stylesheets we generally can't set background colours or images, as most browsers default those to off. We can set them in the screen stylesheet though (of course). I ended up taking a backwards approach to it which works surprisingly well. So, given your HTML:

<a href="#" id="logo"><img src="my_logo.png" alt="My company name" /></a>

let's make my_logo.png your black+white print version. We can then use some trickery in your screen.css to hide it and show your colour logo:

#logo {
width: x;
height: y;
display: block;
background: url(my_colour_logo.png);
#logo img {
display: none;

OK, so you get the upfront hit of loading two logos, but it can make your print versions look much cleaner. Nothing complex here, but it hadn't occurred to me before.

1:55 am on Apr 26, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
votes: 0

nice one, and I'd agree that getting *good* print version results needs upfront planning.

Browsers treat print very poorly, so anything you can do to help it a bit generally makes a big difference, still for critical to get printed info (e.g. directions to get to the business or so) it might be better to provide a pdf version in case the browser doesn't do the page justice.

I'd like browsers to listen a bit better to what we ask of them when they see a print media stylesheet.
Still designing with the lowest common denominator in mind is what leads to a standstill in browser support.