kazinix
kazinix

Reputation: 30163

HTML/CSS - Why background-color turns white when printing?

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

@media all {
  body {
    background-color: green;
  }
  #P1 {
    background-color: #f00;
  }
}

@media print {
  #ActionPanel {
    visibility: hidden;
  }
}
<div id="ActionPanel">
  <input type="button" onclick="javascript:window.print();" value="Print">
</div>

<p id="P1">
  Hello World!
</p>

<p id="P2">
  Hello Web!
</p>

<p id="P3">
  Hello StackOverflow
</p>

Upvotes: 8

Views: 8202

Answers (2)

Steve Quezadas
Steve Quezadas

Reputation: 744

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:

<style type="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>
  <div id="outer_box">
    <div id="yellow_highlight">&nbsp;</div>
    <div id="message_text">hello, world!</div>
  </div>
</body>

Upvotes: 4

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175098

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

Upvotes: 11

Related Questions