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 g

Answer 1

Your main document, will import 2 stylesheets, 1 for the screen and another for the printer. You can fine tune the media settings as you need.

Here is the background image called in your main css file used in browsers.

.bg {
background: url("http://fpoimg.com/250x250") top left no-repeat;
width:250px;
height: 250px;
}

And your print hack used by browsers when users initiate the print dialog. So you can add the print class to your div and have it print out, or remove it if needed.

.bg.print {
display: list-item;
list-style-image: url("http://fpoimg.com/250x250");
list-style-position: inside;
}

Note: You can also use the @media rule instead of importing files if you want to avoid making an extra http request.

reference from: http://www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html