Print image loaded from css sprite?

Question

I have a web page that loads two images from a css sprite like this:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <div class="arrow low"></div>
    <div class="arrow high"></div>
</body>
</html>

and the css (stylesheet.css) looks like this:

.arrow
{
  height: 239px;
  width: 260px;
  background: url('logotypearrows.png') no-repeat;
}

.arrow.high
{
  background-position: 10px 0px;
}

.arrow.low
{
  background-position: -1003px 0px;
}

The web page looks perfect but I can't print it. I can't see the dynamically loaded arrows. Anyone that knows how to solve this problem? I want to be able to print out the arrows and I want to load them from a css sprite.

score 3 · Accepted Answer · answered Jan 17 '12 at 13:03

By default browsers do not print background-images, this can be changed by user. Maybe you should add some content inside div <div class="arrow low"><span class="print-only">*</span></div> and make it visible only for print version of your page with @media print.

score 2 · Answer 2 · answered Jun 05 '18 at 14:26

Quick fix:

You can have a custom css class for media type print like this,

@media print {
     .printable {
         -webkit-print-color-adjust: exact !important;
         color-adjust: exact !important; 
     }
}

And add this class to your divs,

<div class="arrow high printable"></div>

This will print your background images in Chrome, Firefox and Safari.

Note: These css options are non-standard - so, quite risky to use these in production. Also, this won't work in Internet Explorer - you need to enable the option "Print background images" from File --> Page Setup.

Cross-browser fix:

Instead of using divs with css image sprites as background, you can use actual images with the same logic you have applied in your classes. For an example, you can check my JsFiddle here

score 0 · Answer 3 · answered Jan 17 '12 at 12:54

0

In which image you have to print?

answered Jan 17 '12 at 12:54

Shalini Subramani

502
1
6
23

score 0 · Answer 4 · edited May 23 '17 at 12:15

0

It's up to the user and their browser settings to print or not print background images. To keep yourself from relying on that, put the images in the foreground in HTML. —Kon

(taken from this related thread)

edited May 23 '17 at 12:15

Community

1
1

answered Jan 17 '12 at 13:00

Jeaf Gilbert

11,495
19
78
105

Print image loaded from css sprite?

4 Answers4