CSS media print issues with background-color

Question

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

User · Answer

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    lt table gt     lt tr gt       lt td class  your-background  gt  amp nbsp  lt  td gt       lt td class  your-background  gt  amp nbsp  lt  td gt       lt td class  your-background  gt  amp nbsp  lt  td gt     lt  tr gt   lt  table gt    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  lt table class  your-background  gt  and  lt tr class  your-background  gt  won t work   We use this to get background colors in all browsers  still  IE9  required

User · Answer

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

User · Answer

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

User · Answer

Try this  it worked for me on Google Chrome    lt style media  print  type  text css  gt       page           background-color  white  important         lt  style gt

User · Answer

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  amp  -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    lt div class  foo  gt    lt p class  red  gt Some text lt  p gt   lt  div gt    And your CSS    red  color red  important   foo  color red  important      lt -- This won t always paint the p

User · Answer

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

User · Answer

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    lt table class  table  gt       lt tr class  highlighted  gt         lt td gt Name lt  td gt         lt td gt School lt  td gt         lt td gt Height lt  td gt         lt td gt Weight lt  td gt       lt  tr gt   lt  table gt    To override this CSS  place the following  more specific  rule in your stylesheet    media print       table tr highlighted  gt  td           background-color  rgba 247  202  24  0 3   important            This works because the rule is more specific than the bootstrap default

User · Answer

For Chrome                  Ctrl P   gt  Select the Click On More Settings   gt  In the Options Menu Select the Background and Graphics Options                          Will Work    Why wasn t it working Reason   Chrome Browser had Fonts And Headers Enabled General Case      When you dont need to turn on this option manually In body in CSS type      -webkit-print-color-adjust exact  important    Works

User · Answer

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

User · Answer

You can use the tag canvas and  draw  the background  which work on IE9  Gecko and Webkit

User · Answer

tr group-title     padding-top   5rem    border-top  2rem solid lightgray     tr group-title  gt  td h5     margin-top  -1 9rem                lt tbody gt               lt tr class  quot group-title quot  gt                 lt td colspan  quot 6 quot  gt                   lt h5 align  quot center quot  gt    group title    lt  h5 gt                 lt  td gt               lt  tr gt   Works in Chrome and Edge

User · Answer

-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

User · Answer

To enable background printing in Chrome   body     -webkit-print-color-adjust  exact  important

User · Answer

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  amp  Options  Tab under Options

User · Answer

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  amp  Footer  Demo  The Ultimate Print HTML Template with Header  amp  Footer Demo

User · Answer

For chrome  I have used something like this and it worked out for me   Within the body tag    lt body style  -webkit-print-color-adjust  exact   gt   lt  body gt    Or for a particular element  let s say if you have table and you want to fill a td i e a cell    lt table gt  lt tr gt  lt td style  -webkit-print-color-adjust  exact   gt  lt  tr gt  lt  table gt

User · Answer

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

User · Answer

x000D   x000D      body          background-color   E5FFE5             bg print         border-bottom  30px solid  FFCC33             orange bg print content          margin-top  -25px          padding  0 10px        x000D       lt div class  bg print  gt       lt  div gt       lt div class  orange bg print content  gt          My Content With Background       lt  div gt  x000D   x000D   x000D   Tested and works in Chrome and Firefox and Edge

User · Answer

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   lt img src  someImage png  class  background-print-img  gt    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

User · Answer

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

User · Answer

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  amp  enjoy   Here it is a full printable HTML page for bootstrap    lt  DOCTYPE html gt   lt html gt    lt head gt   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt   lt style type  text css  gt          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           lt  style gt   lt  head gt    lt  -- CONTENT -- gt   lt body gt        lt  -- PRINT ROW BLOCK -- gt       lt div class  container  gt        lt div class  row  gt           lt div class  col-xs-6  gt               lt div background-color   A400C1  gt                   lt h4 gt                  Hey    this works                    lt  h4 gt                   lt div background-color   0068C1  gt                       lt p gt                      Ohh    this works recursive too                         lt div background-color  green  style  width  80px  height  60px  gt                          Any size                         lt  div gt                       lt  p gt                   lt  div gt               lt  div gt           lt  div gt            lt div class  col-xs-6  gt               lt div background-color   FFCB83  style  height  200px  gt                  Some content                 lt  div gt           lt  div gt        lt  div gt     lt script gt      var containers   document querySelectorAll   background-color          for  i   0  i  lt  containers length  i                     Element         var container   containers i           container insertAdjacentHTML  beforeend     lt canvas id  canvas-    i      gt  lt  canvas gt                 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     lt  script gt     lt  body gt    lt  html gt

[css] CSS @media print issues with background-color;

Examples related to css

Examples related to media-queries