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; }
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With