6

How can i print a webpage exactly how it looks like -- I mean with background images and colors?

(In IE)

Best Zeesahn

Paul
  • 6,188
  • 1
  • 41
  • 63
Zeeshan Rang
  • 19,375
  • 28
  • 72
  • 100

5 Answers5

4

In IE this is configurable from the browser. Check this tutorial for the details. Though I suspect you are looking for a css solution. I have not been able to accomplish this in a consistent fashion.

This is probably the best solution I have come across. It involves list-style... rules to attempt to get the job done. good luck.

Edit - pulled from web-graphics.com

#ti\tle {                            /* 6. */
  display: list-item;                /* 1. */
  list-style-image: url(banner.jpg); /* 2. */
  list-style-position: inside;       /* 3. */
  letter-spacing: -1000em;           /* 4. */
  font-size: 1pt;                    /* 5. */
  color: #fff;                       /* 5. */
}

Some annotations:

  1. We give our h1 the characteristics of a list-item.
  2. We pretend our banner image is a list-style-image.
  3. Firefox wants you to put the image inside.
  4. We make the text disappear into a black hole by means of Malarkey's Image Replacement (MIR).
  5. As MIR doesn't work in Opera, we set the font-size to 1pt and make the text white. This works fine with Opera's default print settings. Other image replacement techniques rely on moving or hiding mechanisms, all of which would also hide our image. Hence small, white text.
  6. As list-style-image is not supported in IE5 and IE5.5, we exclude these browsers with a simple escaping hack.

That's all. It works in IE6, Firefox 1.0 and 1.5 and Opera 8.5 - don't know about Safari, but I expect no problems. Konqueror 3.5 shows a black "H" just below the banner - however, the

Matthew Vines
  • 27,253
  • 7
  • 76
  • 97
  • 2
    @jinsungy I was able to pull it up on the Wayback Internet Archive: http://web.archive.org/web/20101205163530/http://web-graphics.com/mtarchive/001703.php – D.Tate Mar 08 '13 at 15:02
  • doesnot seem to work now https://jsfiddle.net/pq6Lkejj/ page content is pushed below the image – makc Mar 14 '16 at 11:50
3

By default, Internet Explorer (and some other browsers too, like Opera or Maxthon for instance) prints a webpage without any background images or colors. To print a webpage with all the background images or colors, open Internet Explorer and go to Tools->Internet Options->Advanced. In the Settings window, you will need to scroll down until you find the Printing->Print background colors and images option and check it. After you did that press Apply, then Ok and this should solve the printing problem.

Haim Evgi
  • 123,187
  • 45
  • 217
  • 223
0

In short, try using a print stylesheet.

Check this question for more info:

How can I print background images in FF or IE?

Community
  • 1
  • 1
Eric Petroelje
  • 59,820
  • 9
  • 127
  • 177
0

// In your asp file, create a vbscript variable named prnMode and set it // to true when in print mode. Then surround your entire tag with this 

<body>
<% If prnMode Then %>
<div style="visibility: visible;">
<% End If %>
... your web page goes here
<% If prnMode Then %>
</div>
<% End If %>
</body>

// I did not actually print, but print preview now displays colors and imgs.

David918
  • 11
  • 3
  • Doesn't that seem to you about webpage and not necessarily asp .net pages using vbscript... – NREZ Aug 19 '13 at 10:17
-2

Put images in HTML not in CSS

HTML

  <img src="../some_images.jpg" />

not 

background-images:url(../some_images.jpg);
AlexC
  • 9,657
  • 17
  • 64
  • 98