How to print webpage with background image?

Question

I'm trying to print a web page form in IE with a background-image; now the issue is that it is not showing background-image in its print. Is there a way to fix it because I tried lots of tricks but none of them are actually working. if any one of you fixed it before please share.

Solution 1

This is just for people who may try to spend a lot of time to print css background images. This may not be 100% working, but you may pick from here.

Solution: not possible (if overlapping images are present in UI)

 $('#rootdiv').find('div').each(function(){
    if( $(this).css("background-image") !=  "none"){

        $(this).css("overflow" ,"hidden").css("position", "relative");
        $(this).prepend('<img style="display: block;position: absolute;" src="'+$(this).css("background-image").replace(/"/g,"").replace(/url\(|\)$/ig, "")+'">');

        $(this).css("background",'..');

    }
 });

P.S.: To have sliced half image print on the page, we need to set a width for the div ( i.e., $(this) ) less than actual width of background-image( specified by src in dynamically created img tag above) , it will show sliced image

Solution 2

Here are two really good posts, previously asked in stackoverflow:

Print webpage with background images and colors?

https://stackoverflow.com/questions/596876/how-can-i-print-background-images-in-ff-or-ie

They both reference list style usage.

Solution 3

Go to Tools > Internet Options, click on the "Advanced" Tab. Scroll down to a header called "Printing", check "Print background colors and images".

This instruction is for IE 8.0, but should be somewhat the same for older versions.

This is default to unchecked because not everyone wants to print the fancy stuff but only the text.. But nowadays, its quite a norm to want everything in the printing!