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

Question

I am trying to style a page for printing in IE. When i tick the "Print background and images" option in Page Setup and then look at the page preview, only some of the icons show up. But all icons have the exact same style.

The only thing significant about them is that they come from a sprite. But it works with normal styling.

Does anyone have any ideas what could be going wrong or point me in a helpful direction? :)

Thank you all.

update: Dont know if it helps, but here's the style and html to go along with the icons

<td style="height: 200px;">
  <i class="icon1 px24" title="icon"></i> 
  <i class="icon2 px24" title="icon"></i>
  <i class="icon3 px24" title="icon"></i> 
  <i class="icon4 px24" title="icon"></i>
</td>

And style:

Each icon overrides the position in order to display the correct image from the sprite:

base-webkit-t-da.css:6062
i.icon1 {
    background-position: -12em -8em;
}

General style:

base-webkit-t-da.css:6098
i.px24 {
    font-size: 24px;
}

base-webkit-t-da.css:5664
i {
    color: rgba(0, 0, 0, 0);
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    text-indent: 10em;
    width: 1em;
    height: 1em;
    font-size: 16px;
    background-image: url(http://domain.o/img/domain/icons/icons.svg?v=(16.4%s);
    background-repeat: no-repeat;
    background-size: 20em;
    background-position: -1em;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
    padding: 0!important;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
media="print"
base_print-webk…-da.css:7
* {
    box-shadow: none!important;
}
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
user agent stylesheet
i, cite, em, var, address, dfn {
    font-style: italic;
}
Inherited from td
base-webkit-t-da.css:1569
table.list td, table.grid td, table.list th, table.grid th {
    padding: 2px 0.5em;
    text-align: left;
}
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from tr
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from tbody
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from table.list.canSort.isSorted
base-webkit-t-da.css:1535
table.list, table.grid {
    width: 100%;
    margin: 0 0 2em 0;
    line-height: 1.7em;
}
base-webkit-t-da.css:1318
p, ul, table {
    margin: .5em 0;
    line-height: 1.7em;
}
base-webkit-t-da.css:71
table {
    border: 0;
    border-collapse: collapse;
}
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
user agent stylesheet
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}
Inherited from article.meetingAnalysis
base-webkit-tea…r-da.css:10454
body article {
    font-size: 1em;
}
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from div
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from article.meeting
base-webkit-tea…r-da.css:10454
body article {
    font-size: 1em;
}
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from div#container
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from main#frame
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from div#pagewrapper.meetings.public
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from body.t.loggedIn.scaleToTablet.hasFreshdeskChat
media="print"
base_print-webk…t-da.css:10
body {
    background: transparent none;
    font-size: .7em;
}
base-webkit-t-da.css:48
body {
    font-size: .75em;
    font-family: 'Proxima-Nova', Helvetica, Verdana, sans-serif;
    color: #333333;
    padding: 0;
    z-index: 0;
}
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from html.wf-proximanova-n7-active.wf-proximanova-i7-active.wf-proximanova-n4-active.wf-proximanova-i4-active.wf-active.lc-cb-container-vi
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}

Update: So 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. So we decided we'll probably just refer users to a different browser if they want a better layout when printing. Thank you everyone for your help.

If you want your images to be printable, they need to be in an `` tag. See this answer here for more information: http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image?rq=1. According to that answer, you can also use `backgroung-image` property. — zik, Feb 28 '17 at 10:33

score 0 · Accepted Answer · answered Oct 24 '17 at 10:32

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.

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

1 Answers1