Print Background Image in Ie Without Enable "Print Background Colors and Images"

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

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?

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.

Background color not showing in print preview

The Chrome CSS property -webkit-print-color-adjust: exact; works appropriately.

However, making sure you have the correct CSS for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print CSS from your screen CSS. This is done via the @media print and @media screen.

Often times just setting up some extra @media print CSS is not enough because you still have all your other CSS included when printing as well. In these cases you just need to be aware of CSS specificity as the print rules don't automatically win against non-print CSS rules.

In your case, the -webkit-print-color-adjust: exact is working. However, your background-color and color definitions are being beaten out by other CSS with higher specificity.

While I do not endorse using !important in nearly any circumstance, the following definitions work properly and expose the problem:

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        -webkit-print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

Here is the fiddle (and embedded for ease of print previewing).

In IE11 background colors not working on printing

First of all you have to check that IE background print feature is enable or not.

http://prntscr.com/gztny5

also include this css to webkit browser

-webkit-print-color-adjust: exact;

Hope this is help you

Unable to print background-colors (css solution)?

Ok, I think you didn't got what I meant in the comments, anyways, so it's pretty simple, say am having an element, like

<div class="blow"></div>

With a background set to tomato, so inorder to make that work, first of all you have to be sure that you have media print set, like

@media print {
  /* Declarations go here */
}

OR

<link rel="stylesheet" href="style.css" media="print" />

---

Now, what you have to declare is

-webkit-print-color-adjust: exact; in the property block, like

@media print, screen { /* Using for the screen as well */
    .blow {
        height: 100px; 
        width: 100px; 
        background: tomato;
        -webkit-print-color-adjust: exact; 
    }
}

Demo (Only for webkit browsers i.e Chrome/Safari)

In the above demo, you should be able to see the red block, even in the print preview window of your Chrome.

---

As you have commented, it works for me..

OR

---

Support for the same is dirty, for more information on the property, you can refer MDN

From MDN :

Body element backgrounds are not printed

Currently neither
Chrome nor Safari print backgrounds of the body element. If this
property is set to exact for the body element, it will apply only to
its descendants.

Chrome clipped image bug

When background images are clipped (for example, when using
background-image sprites), due to Chromium bug 131054, they will
appear distorted when printed from the Chrome browser with
-webkit-print-color-adjust: exact. Solid backgrounds and background images that are not clipped (i.e. have lower width and height than the
element to which they are applied) are printed correctly.

External links

WebKit bug 64583: "WIP: Add CSS property to control printing of backgrounds for individual elements"

CSSWG wiki: "print-background" - a proposal to standardize this
property

CSS @media print issues with background-color;

IF a user has "Print Background colours and images" turned off in their print settings, no CSS will override that, so always account for that. This is a default setting.

Once that is set so it will print background colours and images, what you have there will work.

It is found in different spots.
In IE9beta it's found in Print->Page Options under Paper options

In FireFox it's in Page Setup -> [Format & Options] Tab under Options.

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.

---

Related Topics