homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Black and white logo for your print stylesheet

WebmasterWorld Senior Member 10+ Year Member

Msg#: 3633920 posted 9:02 am on Apr 24, 2008 (gmt 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.



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

Msg#: 3633920 posted 1:55 am on Apr 26, 2008 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved