10

I need to print some pages with CSS backgrounds but they don't appear in Safari or Chrome, in FF there's an option in Page Setup but I haven't been able to find it in these two browsers. Do they not support it?

Thanks all in advance.

Javier Villanueva
  • 3,886
  • 13
  • 48
  • 80

4 Answers4

36

In chrome (newer versions 17+ I think), this is controlled by a CSS property on the items which developers can add:

-webkit-print-color-adjust:exact;

From the user's point of view, there doesn't seem to be an option for this.

Luke H
  • 3,125
  • 27
  • 31
  • This also fixes some text colour issues. The only other value I can see any reference to is 'economy' so I'm presuming the idea of this is to reduce ink usage by removing background's and simplifying colours? – dmnc May 16 '12 at 15:11
  • @dmnc what text color issues? – Ben Oct 10 '12 at 21:04
  • @Ben When you print from webkit, it will simplify colours so, for example, if a colour has a small amount of cyan and a large amount of magenta then it prints as fully magenta to save ink. This declaration disables that. – dmnc Oct 11 '12 at 22:28
  • @dmnc interesting. do you have a source for this ink switching behavior? (Yes, I've googled.) I personally think the whole property is misbegotten, anti-standards, and should be shelved. Both background printing and ink management are for users and printers to decide, not developers. – Ben Oct 11 '12 at 23:31
  • @Ben I'm also failing to find anything very clear about it with some Googling. We discovered at my workplace from experimentation when a client complained that printouts weren't matching their brand colours. I think via [wkhtmltopdf](http://code.google.com/p/wkhtmltopdf/) – dmnc Oct 16 '12 at 08:24
  • @dmnc Well, I'm totally baffled that webkit would implement this kind of property and not bother to document it anywhere. I'm also baffled that any browser would implement it in a way that completely hides it from the user. I have trouble thinking of a real world use case where ink-saving should be a developer's and not a user's decision. – Ben Oct 17 '12 at 19:39
  • @Ben I think this is just another chicken-and-egg case. The developers of Webkit decided not to allow the users to set their printer property, so either way is being a developer's decision. In this case Webkit developers. And I'm agreed 100% with you, this is an option an user should take the decision over, none the developers. If the user wants to waste their toner in one sheet of paper is their choice. But because is hasn't been an option to begin with, developers has to find out ways to force it at users request - Ironic, Isn't? – raphie Feb 28 '13 at 18:55
  • 5
    @raphie Chrome just changed course on this issue. Canary builds have checkboxes for toggling background printing. See this long and contentious chromium thread for the history: http://code.google.com/p/chromium/issues/detail?id=113594 – Ben Mar 01 '13 at 20:03
  • If you're wondering whether this CSS property still works after Chrome introduced the background checkbox in the print dialog, the answer is yes, it does! – Jake Stoeffler Aug 20 '14 at 18:13
2

With the newest Chrome, that is an option.

enter image description here

You can also just take a screen shot and print the bitmap image in an image editor or paste the screen shot in Word to print.

Chrome Version 69.0.3497.100 (Official Build) (64-bit)

Chloe
  • 25,162
  • 40
  • 190
  • 357
0

I had this issue again, it was the Twitter Bootstrap CSS causing the issue. When I stopped using Bootstrap, the issue was resolved without any need for the special CSS property (-webkit-print-color-adjust:exact;).

Bryce Chamberlain
  • 465
  • 4
  • 4
-2

Printing background images is a browser-dependent feature. FF and IE have it but you cannot force it otherwise via sourcecode.

justacoder
  • 2,684
  • 6
  • 47
  • 78