Using print css, image added before: the body does not appear in Internet Explorer 8

Question

I use separate print css on our website. It was suggested that we have our logo at the top of the printed pages. This is the code I use for print.css:

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

This works in Firefox, Chrome, Safari and Opera ... and, of course, you know what comes next.

It does not work in Internet Explorer 8, which apparently supports it before as a pseudo-class: http://www.quirksmode.org/css/beforeafter_content.html

In the print preview, the empty space is the same size as the logo, but our logo does not print. If I changed the code to:

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

"Test Text" shows, but still not a logo.

Does anyone have any ideas? It has become very difficult for me that I cannot debug the “preview”, and just changing the media type on the CSS links does something completely different in the browser screen.

Cheers There

Answer 1

You cannot print default background images. Users need to change browser settings to print background and image colors.

It’s best to add the following HTML:

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

Arrange something like this to explicitly hide from configurations without printing:

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