How can I print background images in FF or IE?

user_8715 0
Viewed 86708

Is there any way to set ff and ie to print background images?

I am using stars image to classify some skills and I set it as a background image and positioning to either set one start, two, three, etc. When I try to print the page the images disappear.

So is there any way to make them appear when I print the page or at least have a way of replacing the images with * or something that would be visible?

css html
8 Answers

Have you considered using a print stylesheet? This could allow you to do something like:

<div class="star">*</div>

/* media:screen */
.star {
    background: ...;
    overflow: hidden;
    text-indent: 9999em;
}

/* media:print */
.star {
    text-indent: 0;
}

or even easier:

<div class="star"><img src="./images/star.jpg" alt="*" /></div>

/* media:screen */
.star img {
    visibility: hidden;
}

/* media:print */
.star img {
    visibility: visible;
}

You can specify stylesheets browsers should use by supplying a media tag, either by css or on the link element:

<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="print stylesheet" type="text/css" href="print.css" media="print" />
Ross_20250

In Firefox, go to File => Page Setup. There is a checkbox for "Print Background (colors & images)". Just check that and you should be all set.

user_652300

In your print.css file change the background-image to a list item.

So:

.background {
  display: list-item;
  list-style-image: url(yourbackgroundimage.gif);
  list-style-position: inside;
}

This method is described more here: http://www.web-graphics.com/mtarchive/001703.php

Admin1

For IE http://support.microsoft.com/kb/980077

There must be something similar for FF.

p.s. you cannot set this for clients!

p.s.2. you can replace this stars with foreground pictures (absolute if needed) in css (media="print").

user_673320

I believe this is a browser setting, not the backend of the web sites. I could be wrong however.

Raj_595680
Related