HTML/CSS - Styling for print, background wont show

Question

I'm having some trouble making a site, identical to viewing it in the browser, for print. It looks good, the only thing that got me stuck is that it refuses to display backgrounds. The images are fine though, it's just backgrounds. I haven't tried setting an image as a background, but that shouldn't be necessary anyways, right?

I'm applying the background to a DIV element, with hex colors, if that matters.

Is there any way around this? I searched for it but i didn't find anyone was having the same problem.

Thanks!

Answer 1

By default many browsers does not print background images and colours. You need to enable that in the print options. Chrome does not have that option but to make a WebKit browsers (Safari, Google Chrome) print the background image or colour you should add the following CSS style to the element:

-webkit-print-color-adjust: exact;

Answer 2

Background images being printed or not is not something you can force via CSS: it's a browser's setting and most (if not all) browsers default to the 'not'.

Answer 3

CSS: box-shadow: inset 0 0 0 1000px gold;

Works for all browsers and on table cells and rows.

Answer 4

You could try using two separate elements, for example a paragraph and an image, and then setting the z-index of the image lower than the z-index of the paragraph and then absolutely positioning the image behind your content. But I would recommend not having the background print. Otherwise you're messing with users' expectations and people will probably get annoyed.