Menu
My background color or even the font colors of my elements suddenly turns white when printing. Here's a sample markup:
<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>
an here's the CSS
@media all
{
body
{
background-color:green;
}
#P1
{
background-color:#f00;
}
}
@media print
{
#ActionPanel
{
visibility:hidden;
}
}
826
that is because you have set the background color, and then overwritten it by using the background shorthand…. either move the background-color call after the background shorthand, or add it TO the shorthand… the browser interprets your current code like this…
To set the background color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <body> tag, with the CSS property background-color. HTML5 do not support the <body> tag bgcolor attribute, so the CSS style is used to add background color.
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>
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).
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
