How to get a background image to print using css?

Question

I am using the ASP Net Sprites package to create CSS Sprites on my website.

It is working, but the images it generates do not appear when printed.

The code generated at HTML level is:

<a href="/" id="siteLogo"><img class="getmecooking-logo-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></a> 

How can I get the logo image to appear when a user prints the page?

I have tried adding this in my print.css stylesheet, but it didn't work:

#siteLogo {     visibility: visible; } 

The print.css is working fine and it is formatting the page as I want it to for other elements on the page. My only issue is that I can't get the site logo image to display when it is printed.

Answer 1

For Chrome and Safari you can add the following in your CSS:

@media print {     * {-webkit-print-color-adjust:exact;} } 

For other web browsers unfortunately it's up to the user to manually select the option to print background images (e.g. for users with IE 9, 10 and 11 they have to click on the cog icon -> Print -> Page Setup, and activate the option)