How can I print background images in FF or IE?

Question

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?

Answer 1

For IE http://www.febooti.com/support/faq/iezoom/print-web-page-background.html

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").

Answer 2

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.

Answer 3

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

Answer 4

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" />

Answer 5

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

Answer 6

Actually I found the answer to be rather simple.

Situation: I had a div tag with a background image. Which would not printout when printing.

Solution:

1. Create another style sheet called "print.css"
2. Add the following line of code to your all your web pages right after your orginal css stylesheet link: <link rel="stylesheet" type="text/css" media="print" href="css/print_styles.css" />

3. Immediately after your for the original non printing header, add the following:

   <div id="header"></div> <!-- YOUR NON PRINTING HEADER -->

   <div id="printheader"><img src="images/header_image.jpg" width="940" height="100" alt="header" /></div>

4. In your style.css file, which is the main css style for you site, add the following line:

   #printheader {display: none; } /* Makes the print header not visible */

5. In your print.css file, add the following code:

   #footer, #nav, #sidenav, .print, .search, .breadcrumb, .noprint {display: none;} /* Items from your page you DO NOT want to print */

   #container, #container2, #contentwide, #contentwide_tpsub, #contentwide_tp, #contentwide_open {width: 100%; margin: 0; float: none;} /* Clear widths to ensure all text is printed */

   #printheader {display: block; } /* Turns ON the div when printing */

6. FINISHED.

What you are doing is essentially turning OFF the header on the normal "screen" page and turning the printheader ON when you make a print call.

** Please note: you will need to modify the print.css file to include other elements of your style.css file to format the fonts, colors, etc. Play around with "Print Preview" and add in the elements you need till you get the printout that you've been seeking.

Answer 7

Well, Chris Canada's answer worked for me - quite clever too! Thanks!

Answer 8

Chris Canada's methods works but not for tables. It seems tables have their own rules and need a different work-around.