How to print webpage with background image? [duplicate]

This question already has answers here: How can I print background imag开发者_开发问答es in FF or IE? (8 answers) Closed 9 years ago.

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.

---

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

---

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.

---

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!

---

If it's only for the background image, you could try and right click the background, and select something like 'show background-image.'

But, if you want the web page as a whole, you could always try to 'print the screen' and open the newly made bitmap in paint and print that.

---

By default IE will not print background images and colours - it's a browser setting to save ink/improve legibility of print-outs.

Apart from telling your users to change this setting, the only thing you can do about this is to use real image elements instead of background-images and position your text in front with CSS.

Why do you need the background-image to print out? If it is because the background image is dark and the text in front is light (and therefore unreadable when printed), then what you can do is have a print-only stylesheet that sets darker text.

---

First hit in google: http://www.steve.maurer.net/tutorials/software_tutorials/background_print_id.htm

Just checked and the option is still in IE8.

The default is to not print background colors and images, probably to save ink.

---

Check this article:

http://webdesign.about.com/cs/css/a/aa042103a.htm

I use it to make custom print page ,different from the one from screen.