HTML/CSS - Styling for print, background wont show up?

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

您是否可以通过CSS强制打印是否打印背景图像：这是浏览器的设置，大多数（如果不是全部）浏览器默认为' 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.