Background not printed when using CSS media query

Question

I want to print webpage that support CSS using JavaScript, and here is my simple script:

print.css:

@media print {
 body { background-color:red;}
 }

webpage.html:

<HTML>
<head>
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<BODY>
          Hello World!
</BODY>
</HTML>

Then I try out it, why the result (the background of my webpage) still give me white? I printed it using PDF creator.

Can anyone help me?

Try adding an HTML5 doctype: ` ` on line 1 of your HTML file. — Jace Cotton, Mar 23 '13 at 07:31
It's a browser specific phenomenon, too. I've noticed Safari gives the option to add background colors when printing/printing to pdf. Firefox and Chrome do not give this option, they just strip out background colors. — Aiias, Mar 23 '13 at 07:36
possible duplicate of [How do you add a background image for printing in IE/FF?](http://stackoverflow.com/questions/8166667/how-do-you-add-a-background-image-for-printing-in-ie-ff) — JJJ, Mar 23 '13 at 07:53
If you are using Chrome, one thing that can help you see the results is going to settings, then overrides; you can choose "emulate css media = print" — vals, Mar 23 '13 at 07:56

score 1 · Answer 1 · answered Mar 23 '13 at 08:20

IF a user has "Print Background colours and images" turned off in their print settings, no CSS will override that, so always account for that. This is a default setting.

Once that is set so it will print background colours and images, what you have there will work.

It is found in different spots.

In IE9 it's found in Print->Page Options under Paper options

In FireFox it's in Page Setup -> [Format & Options] Tab under Options.

Background not printed when using CSS media query

1 Answers1