2

In other topics I've found that IE/FF doesn't print background images by default. Now that's a shame, because background images add some possibilities that are very difficult to reproduce with classical <img> tags:

  • You can align them both horizontally and vertically
  • You can crop them if they are larger than the target element (which also enables the idea of CSS sprites)

Now, it's not impossible to do, but it will require me to have different HTML layouts for printing and normal page, and the printing layout will be quite overcomplicated (since I'll have to use <table>s to achieve vertical alignment). Also, the benefits of CSS sprites will be lost.

Is there any hope? I gather that @media print doesn't help, but isn't there something else, maybe browser-specific, that would allow one to say: "Yes, this isn't a normal background, it really needs to be there even in print view"?

Community
  • 1
  • 1
Vilx-
  • 104,512
  • 87
  • 279
  • 422
  • As far as I know, this is impossible, but hopefully someone on Stack Overflow will know a clever trick. – Paul D. Waite Nov 17 '11 at 11:57
  • What is it that you're printing? Some kind of report? – thirtydot Nov 17 '11 at 11:58
  • @Paul D. Waite - Hence the question on SO. Google results seem depressive. :P – Vilx- Nov 17 '11 at 11:58
  • @thritydot - Actually, it's the product page in an e-shop. The product picture is centered in the "preview" square via CSS backgrounds (which also serve as an overflow protection), and so it doesn't show in print view. But in my experience CSS backgrounds often come into play in webdesigns, because they allow a much simpler HTML layout. For instance, instead of an `` I can just write ``. – Vilx- Nov 17 '11 at 12:02
  • +1 good question, a situation that a lot of us end up in some day. – Bazzz Nov 17 '11 at 12:02
  • Have you considered generating PDFs? My weapon of choice is [wkhtmltopdf](http://code.google.com/p/wkhtmltopdf/). – thirtydot Nov 17 '11 at 12:53
  • I've tried (in another project), but for some reason the text in the PDFs came out noticeably blurry, both on my and my colleague's machines. Never understood why or how to work around that. Eventually we just gave up and used Microsoft reporting, which gave out good PDFs, although it was more difficult to work with. – Vilx- Nov 17 '11 at 13:09

2 Answers2

1

Not possible. You would have to some how convert your background images to img or use Canvas. Of course using canvas depends on which IE you supporting.

Its a browser setting which restricts the printing of background images. I think the logic behind it was that the vendors wanted to give the users the option of printing background images and ensure that the web developer could not alter these settings through some sort of script.

Alistair Laing
  • 983
  • 1
  • 7
  • 18
  • Seems like a peculiar decision to me. I should think that something like that would break most contemporary webpages. But I guess that would be a sort of religious debate. I still think that it would make sense to at least include an override option. Or, better yet - respect those background images that are specified in `media: print` types of stylesheets - after all, that does pretty clearly say that the page is _meant_ to be printed with that particular background image. – Vilx- Nov 17 '11 at 13:13
  • It costs a lot of ink to print background images. and users can always opt in to print those in the settings. usually when you print something you want the text and not the background images, which are a waste of ink. If you are making an application that uses the css stylesheets to make something fancy include instructions as to how users can enable background printing. – Tschallacka May 27 '15 at 12:10
0

As a general rule, background images should be reserved for adding to the page design but aren't essential to understanding the content. Therefore it shouldn't matter if they are missing when the page is printed. If something (such as a product shot) is important, then it should be included as an actual image (which has the added bonus of being more accessible).

Could you look at including the image, then hiding it using CSS and duplicating is as a background image (perhaps dynamically using JS)? That way, you can ensure the image itself shows in your print stylesheet, and you get the benefits that having a background image brings. I've created a very simple example here.

CherryFlavourPez
  • 7,529
  • 5
  • 45
  • 47
  • It's there as a background-image because of the additional features that background images provide. If I convert it to a simple image (retaining the same layout with other means), there is no need to keep the background image and do extra work for switching. It's nice to think that you could just use images everywhere where it is content, but as long as they both (`` and ``) offer such radically different features, they aren't really a replacement for each other. – Vilx- Nov 18 '11 at 21:15
  • It's even worse for `background-color`, for which there is no replacement at all. How do you propose to highlight things in a printout without background colors? – Vilx- Nov 18 '11 at 21:18
  • I agree - I was more pointing out the thinking (by browser vendors) that has lead to the default of bg images not being printed. Could you look at inserting the image (using JS) as a pseudo element? That't the only way I can think of having an image in a print stylesheet show up that isn't in the HTML. Doesn't really give you much of a solution where sprites are involved I'm afraid. – CherryFlavourPez Nov 19 '11 at 12:14