Question

I am using a separate print css on our website. It’s been requested that we have our logo at the top of printed pages. This is the code I’m using for print.css:

body:before {
content: url(../images/logo.gif);
}

This works on Firefox, Chrome, Safari and Opera … and of course you know what’s coming next.

It doesn’t work in Internet Explorer 8 which apparently supports before as a pseudo-class: http://www.quirksmode.org/css/beforeafter_content.html

In print preview there is a blank space the same size as the logo but our logo doesn’t print. If I change the code to:

content: "Test Text" url(../images/logo.gif);

The “Test Text” shows, but still not the logo.

Does anyone have any ideas? It’s made very difficult that I can’t debug off “print preview” and simply changing the media type on the CSS links renders something completely different in the browser screen.

Cheers
Tama

Answer 1

You can’t print background images by default. Users need to change their browser settings to print background colours and images.

Your best bet is to add some HTML like this:

<div class="PrintOnly">
  <img id="PrintLogo" src="logo.gif"/>
</div>

Styling something like this to explicitly hide from non-print media configurations:

  .PrintOnly {         display:none; } 
   @media print {  
      .PrintOnly {     display:block; }
   }