Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS style for print

Two images - one for print, one for screen?



7:17 am on May 16, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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!


8:53 am on May 16, 2002 (gmt 0)

10+ Year Member

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.


9:58 am on May 16, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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?


6:25 pm on May 16, 2002 (gmt 0)

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

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">



7:23 am on May 17, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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!


Featured Threads

Hot Threads This Week

Hot Threads This Month