CSS style for print

Two images - one for print, one for screen?

[madmatt69]

Hi everyone! I'm working on creating a print stylesheet for a website. We have these press releases, and so far, I've got a stylesheet that works great. They look good on screen, and when you print them, it's as if they were printed from Word. The only problem - We have a logo, which appears on the press release on the web, and when it prints, it looks terrible. Sure, I could simply hide the image from being printed, but I'd still like a logo to be there.

I'm trying to find a way to define in the print stylesheet that when it's printed, it should use a different logo (one that was made for printing) rather than the one that's used for web.

Is there a way to do this? I've tried a few things, but I just can't get it to work.

If anyone has some suggestions, I'd love to hear them. Thank you!

[SmallTime]

You could specify the images as a background in the css for the page, and a different image for the print css, but I don't think there is a way to deal with resolution, if that is the issue. Also you would loose the ability to link the image in the screen version, but a transparent gif over it may solve that.

[madmatt69]

Good idea - I tried putting the following in the print.css -

body {
background: #FFF url(../news/releases/images/printlogo.gif) no-repeat fixed 7px 9px;
font-size: 10pt;
}

But it doesn't work! When I print, the logo doesn't show up...is there something wrong with my code?

[ergophobe]

Why not just have two logos and have a print stylesheet and a default

<link rel="stylesheet" type="text/css" media="all" href="default.css"/>
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>

in default.css
.printLogo {display: none;}

in print.css
.defaultLogo (display: none;}

Then in your code you have
<img src="default_logo.gif" class="defaultLogo">
<img src="print_logo.gif" class="printLogo">

Tom

[madmatt69]

Thanks! I modified that code a little bit (maybe did it the hard way...dunno :) ) but got it to work finally.

Thanks again for the help!