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

views:

answers:

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!

+2 A:

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

djn 2010-10-21 17:33:07

Hmm, alright. Is there any workaround? I didn't set an image as a background, i just set a solid color, but i don't think that matters..

Nike 2010-10-21 17:39:46

I think there is not (unless you ask nicely your visitors to change their browser settings). As a very general rule backgounds should be used for decorative elements and such; if your background includes informative content you might make it an image (I mean an IMG element) - this will be printed - and if necessary hide the text content with one of the many 'image replacement' techniques.

djn 2010-10-21 20:32:43

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.

Josiah Sprague 2010-10-21 17:54:38

I might give that a shot. I'm not setting a background for the entire page, i'm just setting it for a table header. I don't think they'll get annoyed by that. :)

Nike 2010-10-21 18:01:31

Good call. Actually, it makes a lot of sense to display the background on a table header... hmm... I'll have to do some brainstorming and see if I can come up with a more efficient way to do that. Another thought, you could use an image in the table header that contains the text you want as well as the background. Just make sure you use the correct alt text if you use that approach.

Josiah Sprague 2010-10-21 21:21:12

The nice thing with a lot of browsers is that if you have white text on a black background, for example, the browser will change your text color to black when you print without the background.

Josiah Sprague 2010-10-26 18:04:11

ansaurus

tags:

views:

answers:

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

related questions