div background color in print page doesn't work

html css background-color print-preview
Ebad ghafoory picture Ebad ghafoory · Jul 1, 2011 · Viewed 52.1k times · Source

I want use a div that has a background-color, but if I print the page it appears in white .

When I create a table using <tr bgcolor="#333333"> it also does not work.

How I can create a print page using css and html ?

My code :

<table border="0px" cellspacing="1" cellpadding="0" bgcolor="#777777" width="650px">
   <tr bgcolor="#999999">
       <td align=right colspan=2><span style="font:bold 14px 'b nazanin';">Text</span></td>
   </tr>
</table>

Answer

Jared Farrish picture Jared Farrish · Jul 1, 2011

I would look into the media query way of targeting a stylesheet to the print. I don't believe you will find a common way cross-browser of doing what you want to do (control whether the user's printer prints a background) without using PDFs of your content, which may not be desirable/doable. However, you should consider specially handling your print styles and perhaps avoid backgrounds in your design of the printed page.

http://www.w3.org/TR/css3-mediaqueries/

EDIT

Seeing your other comment, if you have to make the backgrounds print and have a single user, teach your user to make the printer print backgrounds. See for example in Firefox (checkbox):

print backgrounds dialog Firefox

Related questions

How to make div background color transparent in CSS

I'm not using CSS3. So I can't use opacity or filter attributes. Without using these attributes how can I make the background-color transparent of a div? It should be kind of the text box example in this link. Here the …

Read More
Change select box option background color

I have a select box and I'm trying to change the background color of the options when the select box has been clicked and shows all the options. See Fiddle HTML: <select> <option val="">Please choose&…

Read More
How to change the background color on a input checkbox with css?

Hello Friends all I'm trying to do is change the background color of a checkbox. I tired many things but nothing works. Can some one help? input[type="checkbox"] { background: #3d404e; border: #7f83a2 1px solid; }

Read More