Using print css, image added before:body not showing in Internet Explorer 8

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

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; }
   }