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>


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.



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

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

Works for all browsers and on table cells and rows.

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.


@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

<div class="outer"><img src="grayBg.png" class="grayBg" />
  <div class="inner">Some text</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;

Need Your Help

gdb, set breakpoint on all functions in a file

function gdb breakpoints

Is there a single command in gdb which can set breakpoints on all the functions in a given file ?

Meteor : way to specify icon and launch screen of an app?

cordova meteor icons splash-screen

I would like to set an icon and splash screen to my application made with meteor + cordova without editing the Xcode project itself… how to do so ?