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

css printing background-image
DisgruntledGoat picture DisgruntledGoat · Jul 12, 2011 · Viewed 162.1k times · Source

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?

Answer

Marco Bettiolo picture Marco Bettiolo · Jan 16, 2014

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

Related questions

Print <div id="printarea"></div> only?

How do I print the indicated div (without manually disabling all other content on the page)? I want to avoid a new preview dialog, so creating a new window with this content is not useful. The page contains a couple …

Read More
How to make a HTML Page in A4 paper size page(s)?

Is it possible to make a HTML page behave, for example, like a A4-sized page in MS Word? Essentially, I want to be able to show the HTML page in the browser, and outline the content in the dimensions …

Read More
How to print HTML content on click of a button, but not the page?

I want to print some HTML content, when the user clicks on a button. Once the user clicks on that button, the print dialog of the browser will open, but it will not print the webpage. Instead, it will print …

Read More