div background color in print page doesn't work

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&g开发者_开发知识库t;

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

Works for all browsers and on table cells and rows.

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):

Background colors and images don't print by default.

It is a printer option your users could change, but you absolutely can't count on your users knowing or doing that. You cannot control this from the web side (as far as I know).

In Crome "-webkit-print-color-adjust: exact;" works for me.

Use:

@media print {
    .collage_bg {
        background-color: #E6E7E9 !important;
        -webkit-print-color-adjust: exact; 
    }
}

Or Check Background Graphics option:

Both options working fine for me.

Here is something worked for me as I was using Fixed size block element. The image used is 1px X 1px but forced to expand to the size of box. This way we are printing image directly instead of background color/image.

<style type="text/css">
.outer {
    width: 200px;
    height: 80px;
    position: relative;
}
.outer .grayBg {
    position: absolute;
    left: 0;
    top: 0;
    height: 80px;
    width: 100%;
    z-index: 1
}
.inner {
    width: 100%;
    position: relative;
    z-index: 10
}
</style>


<div class="outer"><img src="grayBg.png" class="grayBg" />
  <div class="inner">Some text</div>
</div>

You could however always use an image for that. Make an image with a width of 1px and repeat it like this:

background: url('path/to/image.png') repeat-x;