How to Print Background Images in Ff or Ie

How can I print background images in FF or IE?

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

How do you add a background image for printing in IE/FF?

Not possible. You would have to some how convert your background images to img or use Canvas. Of course using canvas depends on which IE you supporting.

Its a browser setting which restricts the printing of background images. I think the logic behind it was that the vendors wanted to give the users the option of printing background images and ensure that the web developer could not alter these settings through some sort of script.

How can I force browsers to print background images in CSS?

You have very little control over a browser's printing methods. At most you can SUGGEST, but if the browser's print settings have "don't print background images", there's nothing you can do without rewriting your page to turn the background images into floating "foreground" images that happen to be behind other content.

How to forcefully print background image in HTML?

By default, a browser will ignore background css rules when printing a page, and you can't overcome this using css.

The user will need to change their browser settings.

Therefore, any image which you need to print should be rendered as an inline image rather than a css background. You can use css to display the inline image only for print though. Something like this.

HTML

<div class"graph-image graph-7">
  <img src="graph-7.jpg" alt="Graph Description" />
</div>

CSS

.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;}
.graph-image img{display: none;}

@media print{
  .graph-image img{display:inline;}
}

Using this code, or similar code, means the image is used once in html and once in css.
The html version is hidden using css, and for print it displays as normal. This is a hack, but it will do what you want it to do. It will print the image.

Having said that, what you're doing is terribly bad practice. Nothing which conveys meaningful information to the user should be conveyed using css alone. Not only is it semantically incorrect, but it makes the graph less useful to users. An inline image is much better, and if you can, that's what you should use.

How do I make IE show all background images when printing?

Im trying to resolve some of my questions, so I thought I'd add the answer here since no one else came with any.

---

After some debugging, it turns out that IE11(and maybe other IE browsers) simply cant show all images in our sprite file when printing. We have determined that it is likely an IE specific bug as it works fine in chrome and firefox.

Background colour and Background Images not showing in print to PDF in IE and Mozilla Firefox

Check mozilla appearance settings
Open File->Page Setup and verify that "Print Background" is off. in mozilla

Use as the following html:


Red Background

Try these combinations

Print background image in IE without enable Print background colors and images

The ability to print background images (those images specified as background-images in the markup) is entirely up to the end user, you can not control this programmatically from your code. There is a plugin for Firefox that provides a JavaScript API to control many print settings - this might be able to control background-images. However, this obviously only works in Firefox and is dependent on the end user having this particular plugin installed.

You could use absolutely positioned IMG tags and manage the z-index of layered containers to push the IMG to the back, but TBH it's starting to get messy and you may not be able to achieve the affect you are after and maintain correct semantic markup. Certainly if you want the IMG to repeat you'd have to resort to JavaScript to create and position multiple IMG tags, or create one large image that you have manually tiled - not recommended.

Unless you have a specific requirement, users generally do not want (or need) background images to be printed - hence the easy reach option in the browser. So it may be best to rethink the problem. Print and screen are two very different media so you shouldn't necessarily try to mimic on screen display in print, hence CSS's ability to create print only stylesheets - if that is what you are trying to achieve?

---

Related Topics