Processing
 

Background color not showing in print preview

20/02/2013 18:39#1

Joined at: 7 months ago

Post: 1

Thank: 0

Thanked: 0

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.

http://jsfiddle.net/TbrtD/

.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>zznn@abc.co</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> 
06/03/2013 17:08Top#2

Joined at: 9 months ago

Post: 2

Thank: 0

Thanked: 0

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)

28/02/2013 17:29Top#3

Joined at: 10 months ago

Post: 17

Thank: 0

Thanked: 0

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:

https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en

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/

06/03/2013 17:09Top#4

Bertrand

Member

Joined at: 9 months ago

Post: 2

Thank: 0

Thanked: 0

Are your sure this is a css issue ? There are some posts on google around this issue: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

It may be related to the print process. On safari, which is webkit also, there is a checkbox to print background images and colors in the printer dialog.

24/05/2013 16:08Top#5

Joined at: 7 months ago

Post: 1

Thank: 0

Thanked: 0

Use the following in your @media print style sheet.

h1 {     background-color:#404040;     background-image:url("img/404040.png");     background-repeat:repeat;     box-shadow: inset 0 0 0 1000px #404040;     border:30px solid #404040;     height:0;     width:100%;     color:#FFFFFF !important;     margin:0 -20px;     line-height:0px; } 

Here are a couple things to note:

  • background-color is the absolute fallback and is there for posterity mostly.
  • background-image uses a 1px x 1px pixel of #404040 made into a PNG. If the user has images enabled it may work, if not...
  • Set the box-shadow, if that doesn't work...
  • Border = 1/2 your desired height and/or width of box, solid, color. In the example above I wanted a 60px height box.
  • Zero out the heigh/width depending on what you're controlling in the border attribute.
  • Font color will default to black unless you use !important
  • Set line-height to 0 to fix for the box not having physical dimension.
  • Make and host your own PNGs :-)
  • If the text in the block needs to wrap, put it in a div and position the div using position:relative; and remove line-height.

See my fiddle for a more detailed demonstration.

19/02/2015 16:59Top#6

Flea

Member

Joined at: 10 months ago

Post: 2

Thank: 0

Thanked: 0

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;

06/08/2015 22:02Top#7

Joined at: 7 months ago

Post: 1

Thank: 0

Thanked: 0

Your CSS must be like this:

@media print { body {-webkit-print-color-adjust: exact;} }  .vendorListHeading th {    background-color: #1a4567 !important;    color: white !important;    } 
16/12/2015 09:51Top#8

Joined at: 7 months ago

Post: 1

Thank: 0

Thanked: 0

If you are using bootstrap or any other 3rd party CSS, make sure you specify the media screen only on it, so you have the control of the print media type in your own CSS files:

<link rel="stylesheet" media="screen" href="">

31/05/2016 15:38Top#9

Joined at: 7 months ago

Post: 1

Thank: 0

Thanked: 0

There's a style in the bootstrap css files under @media print{*,:after,:before ....} that has color and background styles labeled !important, which remove any background colors on any elements. Kill those two pieces of css and it will work.

Bootstrap is making the executing decision that you should never have any background color in prints, so you have to edit their css or have another !important style that is a higher precedence. Good job bootstrap...

17/06/2016 19:54Top#10

Joined at: 7 months ago

Post: 1

Thank: 0

Thanked: 0

If you download Bootstrap without the "Print media styles" option, you will not have this problem and do not have to remove the "@media print" code manually in your bootstrap.css file.

Similar articles

Chrome, THREE.js: Cross-origin image load denied

5 years ago - Reply: 5 - Views: 267

Prevent Google Chrome Log XMLHttpRequest

3 years ago - Reply: 5 - Views: 276

How can I include ChromeDriver in a JAR?

3 years ago - Reply: 3 - Views: 80

Chrome geolocation not working on any site

3 years ago - Reply: 1 - Views: 43

wrong borders' width in android browser

3 years ago - Reply: 4 - Views: 205

Uncaught SyntaxError: Unexpected token < On Chrome

3 years ago - Reply: 10 - Views: 462

Flashdata not getting cleared in Codeigniter

3 years ago - Reply: 5 - Views: 57

Illegal access Javascript error in Chrome

3 years ago - Reply: 1 - Views: 51

ng-repeat not updating in Chrome

3 years ago - Reply: 1 - Views: 81

Applying border to a checkbox in Chrome

4 years ago - Reply: 2 - Views: 118

open browser plugin using access vba

3 years ago - Reply: 1 - Views: 25

vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re