CSS image replacement for... images? It makes sense for print.
Sites with dark backgrounds lend themselves well to white or light-colored logos. The result can be nice on screen, but if the site is printed, there can be undesirable results: either the logo doesn't show up, or if it was saved as a transparent gif, it shows with jagged pixelated edges where the edges are meant to blend in with a dark background color.
One way people get around this is by including two logos on their site, hiding the one for print in the screens css, and vice versa. It works, but it includes twice as many img tags as what is really necessary.
A method I've had success with is calling a print-optimized image in the html, and using CSS to swap out the image with a screen-friendly one.
Compare what happens when you don't do this to when you do.
HTML
<img id="logo" src="logo_print.gif" alt="my bloggy-blog" />CSS
#logo {
background:transparent url(logo_screen.gif) no-repeat top left;
height:0;
overflow:hidden;
padding-top: 100px; /* height of logo for screen */
width: 100px; /* width of logo for screen */
}The height:0; and overflow: hidden; combo makes sure that I don't see the logo intended for print on the screen. By adding a width and padding-top to that image, I can set my screen-optimized logo as the background-image. The width and padding-top should match the width and height of the image you want to show up.
This came about by reading David Shea's image replacement tests. I like the Leahy/Langridge method of image replacement because it requires no extra markup, but this image replacement technique has some cons (as they all do) when it is used to replace text.
If it has cons, why do you think it's an ok idea?
One usually reads about image replacement to replace text, and issues that typically come up are what to do when images are disabled, when CSS is disabled, or what extra markup has to be included to make the effect work. Since I'm using image replacement technique to replace an image, these become non-issues. If images are off, it's the same effect as not using the technique at all - alt attribute values are shown instead. If CSS is off, the print-friendly logo is likely the favored image to show anyway. Also, no extra markup is needed - we manipulate the existing img tag and nothing else.
Presenting a src for the print-optimized logo in the HTML, even though it doesn't get shown, feels a little weird, though, doesn't it? You might feel better if you set the src for the screen-optimized logo, and then use a rule in the print style sheet to swap out for the print-optimized one. But that doesn't work - remember that printing of background images is not enabled in browsers (by default, anyway).
So I'm sure you've seen plenty of sites that have a dark background with a white logo on them. You may even have one yourself. Go give them print preview and see how it's handled. Sometimes (as in the case of this site), text is an acceptable fallback, but if the logo is set as an image, hopefully it is represented well in print.
Comments (12)
Niels Bom said:
Who prints these days? I've printed all of 4 pages this year.
# June 26, 2009 5:37 AM
Dan said:
Why would you not just include a separate stylesheet for the "print" media type?
I've built plenty of sites where I have a dark color scheme for screen, and a light color scheme for print, and using CSS and/or a server-side language, I replace the elements I need to make a page print optimized.
# June 26, 2009 10:39 AM
CSS Guy said:
@Niels:
I know what you mean - some sites may not be worth the effort for print-optimization. But to answer your question - lots of people print, including you, as I happen to know you've printed all of 4 pages this year. :) For some sites, print isn't so important, but for some other sites, it's a requirement that the site holds up at least decently in printed form.
@Dan:
A stylesheet for print is encouraged. However, as I pointed out in example 3, browser print styles don't allow for this technique of background image replacement. For your sites, it sounds like this is a non-issue.
# June 26, 2009 12:34 PM
Jennifer said:
@Niels:
I print constantly! I have trouble reading and learning from the monitor due to my astigmatism and far-sightedness, and I strain even with glasses. Additionally, I tend to mark up and write on the papers I print, and have trouble comprehending the material unless I am able to do so. Weird learning patterns. So, I am one of the users who care about print stylesheets!
This is a cool technique! It's great too because it adds semantic value to the page.
# July 2, 2009 7:36 AM
Estuardo Goro said:
Thanks for the information, I´m stating to work in this and I never think about the pictures, but now I´m going to change the why to make the things and I´m going to be better with the time. I hope I can came soon when you have a new article and I can learn more. Thks.
# July 23, 2009 2:33 PM
Bradford Sherrill said:
Great solution for perhaps a specific page to be printed
# August 4, 2009 10:51 AM
Christopher Werby said:
I like this and think it's clever. I've had this issue in the past and dealt with it by putting both the normal and the print versions of the logo in the HTML and then switched them on and off with either the screen or print versions of the stylesheet. But with the CSS turned off, both logos appear. So I make the print version of the logo 1px wide by 1 px high in the img tag markup.
One point is that I make the print version of the logo a 300dpi file. I still use the same pixel dimensions as the screen version of the logo, but when the logo prints, it doesn't have that soft smeary look you get when you print 72 dpi images. For an example, see http://www.garnetthelfrich.com/
I like your idea of using the background image to flip in the screen version. But there's a downside for logos. I've had clients who wanted to allow people to quickly grab their logo from the Web site. When it's a background image, it's harder to grab. Just a trade-off to be aware of.
# September 12, 2009 1:21 PM
CSS Guy said:
@Christopher,
Thanks for commenting - that's another good trick with the 1x1 in the markup. Interesting point about the downside of using backgound images, but since it's using padding, I can still right-click and save image - its just that it's the print version that will be shared. If a client needed to share a logo this way, this definitely would be something to consider.
# September 12, 2009 9:26 PM
Dude said:
You should use … instead of three periods in your title.
# March 2, 2010 9:45 AM
runescape private servers said:
Thanks for the information, I´m stating to work in this and I never think about the pictures, but now I´m going to change the why to make the things and I´m going to be better with the time. I hope I can came soon when you have a new article and I can learn more. Thks.
# August 16, 2010 7:11 AM
cheat point blank said:
Thanks for commenting - that's another good trick with the 1x1 in the markup. Interesting point about the downside of using backgound images, but since it's using padding, I can still right-click and save image - its just that it's the print version that will be shared. If a client needed to share a logo this way, this definitely would be something to consider.
# August 16, 2010 7:11 AM
runescape cheats said:
Thanks for commenting - that's another good trick with the 1x1 in the markup. Interesting point about the downside of using backgound images, but since it's using padding, I can still right-click and save image - its just that it's the print version that will be shared. If a client needed to share a logo this way, this definitely would be something to consider.
# August 16, 2010 1:05 PM