Nike
Nike

Reputation: 21

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

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!

Upvotes: 1

Views: 2354

Answers (4)

user1502852
user1502852

Reputation:

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

Works for all browsers and on table cells and rows.

Upvotes: 1

Marco Bettiolo
Marco Bettiolo

Reputation: 5171

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;

Upvotes: 5

Jo Sprague
Jo Sprague

Reputation: 17373

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.

Upvotes: 1

djn
djn

Reputation: 3948

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'.

Upvotes: 3

Related Questions