CSS @media print issues with background-color;
CssMedia QueriesCss Problem Overview
I'm new here at this company and we have a product that uses miles of css. I'm attempting to make a printable stylesheet for our app but I'm having issues with background-color in @media print.
@media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
Everything else works, I can modify the borders and such but background-color won't come through in the print. Now I understand that y'all might not be able to answer my question without more details. I was just curious if anyone had this issue, or something similar, before.
Css Solutions
Solution 1 - Css
To enable background printing in Chrome:
body {
-webkit-print-color-adjust: exact !important;
}
Solution 2 - Css
IF a user has "Print Background colours and images" turned off in their print settings, no CSS will override that, so always account for that. This is a default setting.
Once that is set so it will print background colours and images, what you have there will work.
It is found in different spots. In IE9beta it's found in Print->Page Options under Paper options
In FireFox it's in Page Setup -> [Format & Options] Tab under Options.
Solution 3 - Css
Got it:
CSS:
box-shadow: inset 0 0 0 1000px gold;
Works for all boxes - including table cells !!!
- (If the PDF-printer output file is to be believed..?)
- Only tested in Chrome + Firefox on Ubuntu...
Solution 4 - Css
Try this, it worked for me on Google Chrome:
<style media="print" type="text/css">
.page {
background-color: white !important;
}
</style>
Solution 5 - Css
-webkit-print-color-adjust: exact; alone is Not enough
you have to use !important with the attribute
this is printing preview on chrome after I added !important to each background-color and color attrubute in each tag
and this is printing preview on chrome before adding !important
now, to know how to inject !important to div's style, check out this answer I'm unable to inject a style with an “!important” rule
Solution 6 - Css
Two solutions that work (on modern Chrome at least - haven't tested beyond):
- !important right in the regular css declaration works (not even in the @media print)
- Use svg
Solution 7 - Css
If you are looking to create "printer friendly" pages, I recommend adding "!important" to your @media print CSS. This encourages most browsers to print your background images, colors, etc.
EXAMPLES:
background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
Solution 8 - Css
There is another trick you can do without activating the print border option mentioned in other posts. Since borders are printed you can simulate solid background-colors with this hack:
.your-background:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
border-bottom: 1000px solid #eee; /* Make it fit your needs */
}
Activate it by adding the class to your element:
<table>
<tr>
<td class="your-background"> </td>
<td class="your-background"> </td>
<td class="your-background"> </td>
</tr>
</table>
Although this needs some extra code and some extra care to make background-colors visible, it is yet the only solution known to me.
Notice this hack won't work on elements other than display: block; or display: table-cell;, so for example <table class="your-background"> and <tr class="your-background"> won't work.
We use this to get background colors in all browsers (still, IE9+ required).
Solution 9 - Css
For chrome, I have used something like this and it worked out for me.
Within the body tag,
<body style="-webkit-print-color-adjust: exact;"> </body>
Or for a particular element, let's say if you have table and you want to fill a td i.e a cell,
<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
Solution 10 - Css
Despite !important usage being generally frowned upon, this is the offending code in bootstrap.css which prevents table rows from being printed with background-color.
.table td,
.table th {
background-color: #fff !important;
}
Let's assume you are trying to style the following HTML:
<table class="table">
<tr class="highlighted">
<td>Name</td>
<td>School</td>
<td>Height</td>
<td>Weight</td>
</tr>
</table>
To override this CSS, place the following (more specific) rule in your stylesheet:
@media print {
table tr.highlighted > td {
background-color: rgba(247, 202, 24, 0.3) !important;
}
}
This works because the rule is more specific than the bootstrap default.
Solution 11 - Css
Found this issue, because I had a similar problem when trying to generate a PDF from a html output in Google Apps Script where background-colors are also not "printed".
The -webkit-print-color-adjust:exact; and !important solutions of course did not work, but the box-shadow: inset 0 0 0 1000px gold; did... great hack, thank you very much :)
Solution 12 - Css
I just added to the print media query this snippet and all style was applied as intended:
* {
color-adjust: exact!important;
-webkit-print-color-adjust: exact!important;
print-color-adjust: exact!important;
}
Solution 13 - Css
Thought I'd add a recent and 2015 relevant aid from a recent print css experience.
Was able to print backgrounds and colors regardless of print dialog box settings.
To do this, I had to use a combination of !important & -webkit-print-color-adjust:exact !important to get background and colors to print properly.
Also, when declaring colors, I found the most stubborn areas needed a definition directly to your target. For example:
<div class="foo">
<p class="red">Some text</p>
</div>
And your CSS:
.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */
Solution 14 - Css
Tested and Working over Chrome, Firefox, Opera and Edge by 2016/10. Should work on any browser and should always look as expected.
Ok, I did a little cross-browser experiment for printing background colors. Just copy, paste & enjoy!
Here it is a full printable HTML page for bootstrap:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
/* Both z-index are resolving recursive element containment */
[background-color] {
z-index: 0;
position: relative;
-webkit-print-color-adjust: exact !important;
}
[background-color] canvas {
display: block;
position:absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<!-- CONTENT -->
<body>
<!-- PRINT ROW BLOCK -->
<div class="container">
<div class="row">
<div class="col-xs-6">
<div background-color="#A400C1">
<h4>
Hey... this works !
</h4>
<div background-color="#0068C1">
<p>
Ohh... this works recursive too !!
<div background-color="green" style="width: 80px; height: 60px">
Any size !!
</div>
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div background-color="#FFCB83" style="height: 200px">
Some content...
</div>
</div>
</div>
<script>
var containers = document.querySelectorAll("[background-color]");
for (i = 0; i < containers.length; i++)
{
// Element
var container = containers[i];
container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');
// Color
var color = container.getAttribute("background-color");
container.style.backgroundColor = color;
// Inner Canvas
var canvas = document.getElementById("canvas-" + i);
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
var ctx = canvas.getContext("2d");
ctx.fillStyle = color;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
window.print();
</script>
</body>
</html>
Solution 15 - Css
Best "solution" I have found is to provide a prominent "Print" button or link which pops up a small dialogue box explaining boldly, briefly and concisely that they need to adjust printer settings (with an ABC 123 bullet point instruction) to enable background and image printing. This has been very successful for me.
Solution 16 - Css
In some cases (blocks without any content, but with background) it can be overridden using borders, individually for every block.
For example:
.colored {
background: #000;
border: 1px solid #ccc;
width: 8px;
height: 8px;
}
@media print {
.colored div {
border: 4px solid #000;
width: 0;
height: 0;
}
}
Solution 17 - Css
* {
-webkit-print-color-adjust: exact;
}
Also, Enable > Emulate CSS Media From > Inspact > More Tools > Renders. Very detailed steps can be found here.
Solution 18 - Css
You can use the tag canvas and "draw" the background, which work on IE9, Gecko and Webkit.
Solution 19 - Css
If you don't mind using an image instead of a background color(or possibly an image with your background color) the solution below has worked for me in FireFox,Chrome and even IE without any over-rides. Set the image somewhere on the page and hide it until the user prints.
The html on the page with the background image
<img src="someImage.png" class="background-print-img">
The Css
.background-print-img{
display: none;
}
@media print{
.background-print-img{
background:red;
display: block;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:-10;
}
}
Solution 20 - Css
Do not set the background-color inside the print stylesheet. Just set the attribute in the normal css file and it works fine :)
Checkout this example: The Ultimate Print HTML Template with Header & Footer
Demo: The Ultimate Print HTML Template with Header & Footer Demo
Solution 21 - Css
tr.group-title {
padding-top: .5rem;
border-top: 2rem solid lightgray;
}
tr.group-title > td h5 {
margin-top: -1.9rem;
}
<tbody>
<tr class="group-title">
<td colspan="6">
<h5 align="center">{{ group.title }}</h5>
</td>
</tr>
Works in Chrome and Edge
Solution 22 - Css
body{
background-color: #E5FFE5;
}
.bg_print{
border-bottom: 30px solid #FFCC33;
}
.orange_bg_print_content{
margin-top: -25px;
padding: 0 10px;
}
<div class="bg_print">
</div>
<div class="orange_bg_print_content">
My Content With Background!
</div>
Tested and works in Chrome and Firefox and Edge...