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

Question

This question was asked before but the solution is not applicable in my case. I want to make sure certain background images are printed because they are integral to the page. (They are not images directly in the page because there are several of them being used as CSS sprites.)

Another solution on that same question suggests using list-style-image, which only works if you have a different image for every icon, no CSS sprites possible.

Aside from creating a separate page with the icons inline, is there another solution?

Solution 1

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.

Solution 2

With Chrome and Safari you can add the CSS style -webkit-print-color-adjust: exact; to the element to force print the background color and/or image

Solution 3

Browsers, by default, have their option to print background-colors and images turned off. You can add some lines in CSS to bypass this. Just add:

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari, Edge */
    color-adjust: exact !important;                 /*Firefox*/
}

Solution 4

I found a way to print the background image with CSS. It's a bit dependent on how your background is laid out, but it seems to work for my application.

Essentially, you add the @media print to the end of your stylesheet and change the body background slightly.

Example, if your current CSS looks like this:

body {
background:url(images/mybg.png) no-repeat;
}

At the end of your stylesheet, you add:

@media print {
body {
   content:url(images/mybg.png);
  }
}

This adds the image to the body as a "foreground" image, thus making it printable. You may need to add some additional CSS to make the z-index proper. But again, its up to how your page is laid out.

This worked for me when I couldn't get a header image to show up in print view.

Solution 5

The below code works well for me (at least for Chrome).

I also added some margin and page orientation controls.(portrait, landscape)

<style type="text/css" media="print">
@media print {
  body {-webkit-print-color-adjust: exact;}
}
@page {
    size:A4 landscape;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0;
    -webkit-print-color-adjust: exact;
}
</style>

View more solutions

Comments

[JHogue]

This was an awesome solution for what I needed to do, which was switch an inline <img> (for RWD) with a different one for @media print. The web image was on a dark background, so printing that image didn't work on white paper, and I didn't want to force users to print a dark background on the header. Perfect!

[ckpepper02]

@JHogue - Thanks! Glad it helped you.

[Jason]

This is awesome. Makes life much easier for phantomjs users / webkit

[Xenology]

While this isn't a "correct" answer. It is FAR more helpful than the accepted answer.

[Kat Lim Ruiz]

below answer stackoverflow.com/a/15208258/915865 should be marked since it has better explanation, imho

[nuts-n-beer]

I created some simple "printer friendly" reports for my company using this method. It works on OS X Chrome/Safari and Windows 8 Chrome/IE (haven't tried any other platforms).

[Marco Bettiolo]

@MuneemHabib It does not work in IE, actually, the only supported browser is Chrome: developer.mozilla.org/en-US/docs/Web/CSS/…

[vaskort]

In firefox it worked only if you used content inside :before like@hanz answer

[Davy]

that did the trick for chrome ... luckily in this case i only needed to support wekkit ...

[HaulinOats]

@DisgruntledGoat should update this to be the correct answer as it quickly solved my problem (my project at work only focuses on Chrome). It obviously doesn't work for all browsers but it should be known, up front, regardless.

[intcreator]

This appears to have no effect on Chrome, Firefox, and Safari on Mac.

[Qh0stM4N]

ya works fine but mozilla mark as non standart This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

[Admin]

Why is the !important necessary?

[machineghost]

I don't understand how content does anything without ::before/::after? Everything I've read says that property only works when it's inside a before or after pseudo selector, so it seems like the code shown here (with just a "body" selector) wouldn't do anything unless you add a ::before, as in @hanz's answer.

[czmarc]

good point to mention, solved my issue together with -webkit-print-color-adjust: exact !important;

[Nick Woodhams]

Worked for me! Thank you.

[Frédéric]

color-adjust is not properly supported by FireFox unfortunately. It seems to apply only to background, not to the color css property. It is reported as a bug, without much activity or votes. Keeping the background is quite useless if the font color is not preserved, causing it to be unreadable.

[Jabbamonkey]

This is a cute fix, but it doesn't really work if the background image is much larger than the container. (it stretches out my containing div)

[johnny]

This is just what I needed to apply the attribute to every usage of that particular element and let me print the doc appropriately. Thanks!

[Kukeltje]

@Brett84c: I disagree since it is a one browser only solution.

[Ghazi]

Nice solution! no issues.

[Rafael S. Fijalkowski]

It's a good solution. Just keep in mind that it does not work with IE11 (I know!).

[Mahmudul Hasan Shohag]

It's working in 2020 now. Maybe non-standard features are unofficially standards now! I couldn't find any other good solution than this. Who cares about the IE now. All browsers are Chromium or Firefox variant!

[Cloud]

Great find! Thanks

[Kip]

the !important was not necessary for me

[Speednet]

This is not entirely correct. Please see Abhi Beckert's highly-voted answer above.

[Speednet]

This is a fantastic solution. Works in both Firefox and Chrome browsers, contrary to previous comments.