Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Printing

Html/css - Why Background-color Turns White When Printing?

Post a Comment
My background color or even the font colors of my elements suddenly turns white when printing. Here's a sample markup:

Solution 1:

All backgrounds are automatically stripped away from the printed version. It is that way to prevent ink waste.

You can however, enable it in your browser. (How to do that depends on each browser specifically).

Solution 2:

There is no way to have background colors print without manually setting a preference in your browser. However, this may not be an option for some people. The best workaround I can find is rather inelegant. Instead of using "background-color" (which doesn't print), you should create a div tag with a big color border on it. The thing is is that colored borders can print correctly. Then, where the highlighted color is displayed, lay another div tag with the text on it on top. Inelegant, but it works.

It's best to set both the text div and the highlight div's within a third div for easy placement. the inner divs should be position "absolute" and the outer div should have position "relative". This sample code is tested in both firefox and chrome:

<styletype="text/css">#outer_box {
      position: relative; 
      border: 2px solid black; 
      width: 500px; 
      height:300px; 
  }

  #yellow_highlight {
      position: absolute; 
      width: 0px;
      height: 30px;
      border-left: 300px;
      border-color: yellow; 
      border-style: solid; 
      top: 0; 
      left: 0px
  }

  #message_text {
      position: absolute; 
      top: 0; 
      left: 0px;
  }
</style><body><divid="outer_box"><divid="yellow_highlight">&nbsp;</div><divid="message_text">hello, world!</div></div></body>

Post a Comment for "Html/css - Why Background-color Turns White When Printing?"