Print CSS and Logos
June 30, 2009
Most of us now use css background images to display our logos so that we still have the text in our html source for SEO/Accessibility reasons. Usually works out just fine, but one day a very shocked and surprised QA person was waving paper in front of my face going “AHH! The logo is missing! The LOGO IS MISSING!”. I’m all like “background images do NOT print by default. Whatev…”. Then Someone else was like, ‘ewwww our logo doesn’t print?’. As a crowd started to form around the upheaval at my desk I dramatically crumpled the paper and said ‘Ill fix it, Ill fix it! GOSH…’
Since I didn’t want to ditch the CSS purist technique completely I decided to combine the two methods.
(The main reason I actually wanted to keep this technique wasn’t because of purity as much as the fact that I was using a transparent png which is MUCH easier to deal as a bg image with when making it work in IE6)
Usually we start with html that looks like this:
<div id="logo-wrap"> <a href="/index.html">Website Name</a> </div>
With the background image attached to the #logo-wrap div and the text-indent set to like -99999px.
So, I decided to just add the img to this html, and call in the exact same image, then hide it with the screen css and show it in the print css.
The img added to the html:
<div id="logo-wrap">
<a href="/index.html">Website Name
<img src="images/logo.gif" alt="Website Name" />
</a>
</div>css for the screen:
<style type="text/css" media="screen">
#logo-wrap {
background: url(images/logo.gif) no-repeat 0 0;
width: 300px;
height: 250px;
text-indent: -99999px;
}
#logo-wrap img {
display:none;
}
</style>css for the print:
<style type="text/css" media="print">
#logo-wrap {
background: none;
}
#logo-wrap img {
display:block;
}
</style>Very simple but it worked. So, why load an image if it never gets used except for those rare times when some tree hater from the 90s has to print the website? I agree, pretty stupid. But people are happy now when they print. JIRA Closed. I have a job. I am a sell out. I make shit work, shuddup.