HTML/CSS - Why Background-color Turns White When Printing?
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:
<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"> </div>
<div id="message_text">hello, world!</div>
</div>
</body>
Post a Comment for "HTML/CSS - Why Background-color Turns White When Printing?"