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

CSS style for print
Two images - one for print, one for screen?

WebmasterWorld Senior Member 10+ Year Member

Msg#: 174 posted 7:17 am on May 16, 2002 (gmt 0)

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!



10+ Year Member

Msg#: 174 posted 8:53 am on May 16, 2002 (gmt 0)

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.


WebmasterWorld Senior Member 10+ Year Member

Msg#: 174 posted 9:58 am on May 16, 2002 (gmt 0)

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?


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

Msg#: 174 posted 6:25 pm on May 16, 2002 (gmt 0)

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



WebmasterWorld Senior Member 10+ Year Member

Msg#: 174 posted 7:23 am on May 17, 2002 (gmt 0)

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!

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