How to print webpage with background image? [duplicate]

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.

Answers:

Answer

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

Answer

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.

Answer

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!

Answer

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.

Answer

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.

Answer

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.

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.