Background color not showing in print preview
Solution 1
The Chrome CSS property -webkit-print-color-adjust: exact;
works appropriately.
However, making sure you have the correct CSS for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print CSS from your screen CSS. This is done via the @media print
and @media screen
.
Often times just setting up some extra @media print
CSS is not enough because you still have all your other CSS included when printing as well. In these cases you just need to be aware of CSS specificity as the print rules don't automatically win against non-print CSS rules.
In your case, the -webkit-print-color-adjust: exact
is working. However, your background-color
and color definitions are being beaten out by other CSS with higher specificity.
While I do not endorse using !important
in nearly any circumstance, the following definitions work properly and expose the problem:
@media print {
tr.vendorListHeading {
background-color: #1a4567 !important;
-webkit-print-color-adjust: exact;
}
}
@media print {
.vendorListHeading th {
color: white !important;
}
}
Here is the fiddle (and embedded for ease of print previewing).
Solution 2
That CSS property is all you need it works for me...When previewing in Chrome you have the option to see it BW and Color(Color: Options- Color or Black and white) so if you don't have that option, then I suggest to grab this Chrome extension and make your life easier:
The site you added on fiddle needs this in your media print css (you have it just need to add it...
media print CSS in the body:
@media print {
body {-webkit-print-color-adjust: exact;}
}
UPDATE OK so your issue is bootstrap.css...it has a media print css as well as you do....you remove that and that should give you color....you need to either do your own or stick with bootstraps print css.
When I click print on this I see color.... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/
Solution 3
Chrome will not render background-color, or several other styles, when printing if the background graphics setting is turned off.
This has nothing to do with css, @media, or specificity. You can probably hack your way around it, but the easiest way to get chrome to show the background-color and other graphics is to properly check this checkbox under More Settings.
Solution 4
I just needed to add the !important
attribute onto the the background-color tag in order for it to show up, did not need the webkit part:
background-color: #f5f5f5 !important;
Solution 5
Your CSS must be like this:
@media print {
body {
-webkit-print-color-adjust: exact;
}
}
.vendorListHeading th {
background-color: #1a4567 !important;
color: white !important;
}
Related videos on Youtube
![ghost_dad](https://lh4.googleusercontent.com/-sISwE3na-w8/AAAAAAAAAAI/AAAAAAAAACY/fz28SagUmTA/photo.jpg?sz=256)
ghost_dad
I am a self-taught, self-propelled front end developer always looking to expand my knowledge base and mostly, build cool things. I'm lucky enough to do what I love for a living, and share that passion with other people!
Updated on July 08, 2022Comments
-
ghost_dad almost 2 years
I am trying to print a page. In that page I have given a table a background color. When I view the print preview in chrome its not taking on the background color property...
So I tried this property:
-webkit-print-color-adjust: exact;
but still its not showing the color.
.vendorListHeading { background-color: #1a4567; color: white; -webkit-print-color-adjust: exact; } <div class="bs-docs-example" id="soTable" style="padding-top: 10px;"> <table class="table" style="margin-bottom: 0px;"> <thead> <tr class="vendorListHeading" style=""> <th>Date</th> <th>PO Number</th> <th>Term</th> <th>Tax</th> <th>Quote Number</th> <th>Status</th> <th>Account Mgr</th> <th>Shipping Method</th> <th>Shipping Account</th> <th style="width: 184px;">QA</th> <th id="referenceSO">Reference</th> <th id="referenceSO" style="width: 146px;">End-User Name</th> <th id="referenceSO" style="width: 118px;">End-User's PO</th> <th id="referenceSO" style="width: 148px;">Tracking Number</th> </tr> </thead> <tbody> <tr class=""> <td>22</td> <td>20130000</td> <td>Jim B.</td> <td>22</td> <td>510 xxx yyyy</td> <td>[email protected]</td> <td>PDF</td> <td>12/23/2012</td> <td>Approved</td> <td>PDF</td> <td id="referenceSO">12/23/2012</td> <td id="referenceSO">Approved</td> </tr> </tbody> </table> </div>
-
Jeremy Ninnes over 11 yearsIt looks like it works properly: jsfiddle.net/tDggR/2 I'm using chrome version 25
-
Admin over 11 yearsjsfiddle.net/rajkumart08/TbrtD/1/embedded/result its not working here why
-
ruX almost 9 yearsgosh! It works even in java8 webview engine
-
Basheer AL-MOMANI over 7 yearsCheck out my answer stackoverflow.com/a/40087869/4251431
-
-
Admin over 11 yearsextension works for all the pages but it does not work for my code why jsfiddle.net/rajkumart08/TbrtD/1/embedded/result defie.co/testing/twitter-bootstrap-558bc52/docs/examples/…
-
Riskbreaker over 11 yearsif thats the case make sure your bootstrap has webkit-print-color-adjust: exact; on your body is another way to check...in print media css of course
-
Admin over 11 yearsits not working defie.co/testing/twitter-bootstrap-558bc52/docs/examples/… i gave it in this code
-
Riskbreaker over 11 yearsYou did not add it in the print media as I stated in your html inner css: yout html line 1154:
@media print { body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 12px Arial, Helvetica,"Lucida Grande", serif; color: #000;}....
you need to add it in there... -
Admin over 11 yearsI have edited it again but still not working defie.co/testing/twitter-bootstrap-558bc52/docs/examples/…
-
Admin over 11 yearsjsfiddle.net/rajkumart08/TbrtD/1/embedded/result but i dont see the table heading colors in chrome
-
Riskbreaker over 11 yearsyou have the color set my friend. The answer is done.... for the other stuff...it requires more print css styling, that is a NEW TOPIC, but you got color and your answer :)
-
Admin over 11 yearsin this fiddle i ipdate but i am not getting my table color jsfiddle.net/rajkumart08/TbrtD/3/embedded/result .vendorListHeading { background-color: #1a4567; color: white; -webkit-print-color-adjust: exact; }
-
piotr_cz over 8 yearsWhen opening the fiddle, I'm getting the
Print preview failed.
message in Chrome v47.0.2526.106 -
Mike Young over 8 yearsMozilla has marked this as non-standard, so the results are inconsistent and shouldn't be used in production sites developer.mozilla.org/en-US/docs/Web/CSS/…
-
big_water over 7 yearsthis could be done with media="all" instead of two link tags
-
Corgalore about 7 yearsYes, this works in Chrome. Bootstrap css was overriding it for me using print media. You can also preview and inspect print mode using the Rendering tab at bottom of Chrome Elements inspector. There's an option for Emulate CSS Media in case you want to see the override stack.
-
adelriosantiago over 6 yearsIt works, thanks (note that you will need to remove
var
fromwindow
on your last code snippet) -
vimal kumar about 6 yearsThat's fine..May i know the reason why the color is not shown without giving important @Flea
-
Munim Munna over 5 yearsWhy remove all print CSS while printing?
-
Mohd. Shaizad over 5 yearsThis is to make color visible for print
-
codemirror over 5 yearsWorks for me with !important in background
-
Eric over 5 yearsHey, I've finally got around to making a fiddle jsfiddle.net/qm7shrvf for some reason, I cannot get chrome to render the green or red backgrounds in the print preview (I haven't tried to actually print it though) Thanks! (I did observe that the black background of jsfiddle.net does get rendered based on that chrome setting though)
-
Shrikant about 4 yearsWell don't understand why this is happening but it solved my problem :-)
-
yougotiger almost 4 yearsAdding the important description after my settings helped. I had to have the -webkit-print-color-adjust set at body and then in each of my elements that needed color, I had to declare them important for this to work.
-
jazeb007 over 3 yearsI have used css in this way but does not work for me
-
Miguel Angel Mendoza over 3 yearsThis is a non-standard CSS extension that can be used to force printing of background colors and images in browsers based on the WebKit engine, there is an alternative for Firefox, please try using also color-adjust: exact; for more info visit stackoverflow.com/questions/35625178/…
-
Dexter over 3 yearsRemember, if you add
media="screen"
to bootstrap css, then every style from bootstrap will be striped out. -
Parmjeet Singh about 3 yearsThe reason is bootstrap.css, It has a media print css that is taking importance over your css. Following are solutions in this case: - A. override bootstrap media print styles by writing your styles in media print in your css file. - B. give !important to your original styles so that bootstrap media print css cannot override it. In Your case !important have more priority than bootstrap's media print css, That's the reason why !important worked in your case.
-
Ousama about 3 yearsIt works only when we use style attr example:
<td width="35%" style="background-color: #DAEEF3 !important;">
and thewebkit
is mandatory -
Ousama about 3 yearsIt works only when we use style attr example:
<td width="35%" style="background-color: #DAEEF3 !important;">
-
10101010 over 2 yearssaved my day!!!!
-
evnp about 2 yearsMiguel you rock!! only person in this thread to mention Firefox, saving my day