236

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.

starball
  • 20,030
  • 7
  • 43
  • 238
Weston Watson
  • 5,344
  • 6
  • 24
  • 25
  • Well, it passes the W3C CSS-Validator (http://jigsaw.w3.org/css-validator/). That's weird – GôTô Oct 08 '10 at 20:18
  • This should not be a problem any longer. I came to this issue because I had a bootstrap page and bootstrap has an `@media print` query which removes background colors from tables (e.g. stripes). – Martin Thoma Sep 22 '17 at 11:53
  • 1
    @MartinThoma How did you fix the problem? Did you removed the CSS from the boostrap templated? – EduLopez Jan 05 '18 at 00:52

23 Answers23

363

To enable background printing in Chrome:

body {
  -webkit-print-color-adjust: exact !important;
}

Edit: For Chrome, Safari and Firefox:

body{
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
}
drolex
  • 4,993
  • 1
  • 18
  • 14
  • 7
    This seems to have solved my issue with printing a table with alternate row colors. – Victor J. Garcia Oct 14 '13 at 18:09
  • Ensure that you use the correct casing to your image path as Chrome's print dialog doesn't load the images on the first try. This only happens in the event that your background-image property's URL doesn't match the casing of the physical folder's name. (Reported in version 48.0.2564.109 m) – MPaul Feb 10 '16 at 19:53
  • 3
    what is the alternate in firefox and IE – Shan Khan Feb 25 '16 at 10:42
  • 20
    A note for future time travelers: you might want to use [`color-adjust`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-adjust) instead. – Константин Ван Dec 08 '18 at 14:14
  • 1
    @КонстантинВан it's not supported in Chrome as of April 2019. This is firefox documentation. – Thomas Apr 17 '19 at 12:35
  • Works on year 2022 Chrome Version 98.0.4758.80 (Official Build) (x86_64) – Locutus Feb 22 '22 at 01:10
275

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.

Ryan Ternier
  • 8,714
  • 4
  • 46
  • 69
  • 176
    With Chrome and Safari you can add the css style "-webkit-print-color-adjust: exact;" to the element to force print the background color and/or image – Marco Bettiolo Jul 02 '12 at 15:41
  • 11
    @MarcoBettiolo doesn't seem to work on the latest webkit builds, !important does however – Hedde van der Heide May 14 '15 at 09:38
  • 3
    Adding !important to the rule solved it for me also. – Thiago Duarte May 25 '15 at 19:02
  • where is this settting in chrome? – Muneem Habib Jun 25 '15 at 10:22
  • No effect for me in FF or IE. [This](http://stackoverflow.com/questions/14987496/background-color-not-showing-in-print-preview) was solution for me. – dudeNumber4 Jul 13 '15 at 15:39
  • Also not working at least properly in chromium browser. Please have a look here. http://stackoverflow.com/questions/34428821/print-html-table-with-background-colors-in-chromium-browser?noredirect=1#comment56598904_34428821 – Stu Dec 23 '15 at 07:28
  • @MarcoBettiolo Mozilla has marked this property as non-standard so it has inconsistent results https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust – Mike Young Feb 18 '16 at 17:42
  • 26
    To expand upon this, I added color-adjust: exact; for FF to work. So my full code is `*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }` – BitBug Aug 18 '17 at 21:30
  • Dont set the background colour in the print stylesheet. Just so it in the normal CSS and it will work fine. ```
    Content with background
    ```     – Dryden Williams Jul 30 '19 at 10:41
  • Is the advice found in this answer still relevant in 2019? Maybe we could get an update. – mrClean Aug 16 '19 at 13:33
99

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...
isherwood
  • 58,414
  • 16
  • 114
  • 157
T4NK3R
  • 4,245
  • 3
  • 23
  • 25
  • 5
    You can add IE8 and IE9 support with `-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */` If you want your sprite images to be visible, use the img/clip technique http://css-tricks.com/css-sprites-with-inline-images/, that will give you images in IE9 and FF (not IE8 though) – emik Sep 23 '13 at 15:23
  • 2
    Works great in normal browsers, but not in IE, even with the suggestion from @evami. – woz Oct 01 '13 at 13:16
  • @woz I have it functioning in a project with IE8/9. The gradient (just like box-shadow) adds an extra background element that is not eliminated by the forced browser reset. would you mind to share your css? – emik Oct 02 '13 at 14:17
  • I copy-and-pasted your CSS, but I am using IE10. Could that be the difference? – woz Oct 02 '13 at 14:24
  • 10000px is more secure. – Felipe Apr 25 '14 at 06:09
  • 2
    This doesn't seem to work with the latest Chrome (60). – swervo Aug 24 '17 at 18:29
  • 1
    This fails for me in Chrome. I'm using 69. That suggests that it has been broken _at least_ since 60 (as per @swervo's comment). – iconoclast Sep 18 '18 at 21:20
36

Try this, it worked for me on Google Chrome:

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>
MAXE
  • 4,978
  • 2
  • 45
  • 61
28

-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

printing preview on chrome

and this is printing preview on chrome before adding !important

enter image description here

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

Community
  • 1
  • 1
Basheer AL-MOMANI
  • 14,473
  • 9
  • 96
  • 92
11

Two solutions that work (on modern Chrome at least - haven't tested beyond):

  1. !important right in the regular css declaration works (not even in the @media print)
  2. Use svg
yar1
  • 1,331
  • 2
  • 15
  • 26
  • 6
    !important solves the problem in every modern browser, as long as "Print Background Colors and Images" is enabled. – Chris Hynes Jun 25 '13 at 17:53
  • 2
    !important also works without user intervention if you use it together with body { -webkit-print-color-adjust:exact; } (as per comment above) – yar1 Jul 08 '13 at 18:40
  • 3
    i've found that if I use `color-adjust` or the webkit variant I do not in fact need the important rule. – Kasapo Jan 27 '17 at 20:11
8

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;
nuts-n-beer
  • 255
  • 4
  • 8
6

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">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</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).

kernel
  • 3,654
  • 3
  • 25
  • 33
  • 1
    it's a mad hack, but it at least forces some form of background colour regardless of the print settings. brilliant, thanks. – Brad Zacher Dec 09 '15 at 04:57
6

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>
AJPerez
  • 3,435
  • 10
  • 61
  • 91
Aamir Shaikh
  • 83
  • 1
  • 4
6

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.

The Aelfinn
  • 13,649
  • 2
  • 54
  • 45
  • After hours of searching, I found this answer. I went in and eliminated the lines from Bootstrap.css and WHAM! Colors in the printable background! – Mighty Ferengi Jun 13 '18 at 16:18
  • 1
    Thank you! Finally, this is the answer that got me up and running but I needed to add: body { -webkit-print-color-adjust: exact !important; } – Ocean Airdrop Feb 02 '19 at 19:22
6

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;
      }
vnapastiuk
  • 609
  • 7
  • 12
3

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 :)

allicarn
  • 2,859
  • 2
  • 28
  • 47
John
  • 131
  • 4
2

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 */
Jonathan
  • 31
  • 1
2

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>
Heroselohim
  • 1,241
  • 1
  • 18
  • 23
1

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.

alano
  • 35
  • 1
1

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;
  }
}
Gedeon
  • 31
  • 7
1
* {
  -webkit-print-color-adjust: exact;
}

Also, Enable > Emulate CSS Media From > Inspact > More Tools > Renders. Very detailed steps can be found here.

metodribic
  • 1,561
  • 17
  • 27
raqibnur
  • 59
  • 1
  • 7
0

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

0

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;
    }

}

ksealey
  • 1,698
  • 1
  • 17
  • 16
  • I took your approach and tried to get it to work on IE11, but sadly it didn't work. That was until I put a `!important` value on each attribute in my class which then got it to work. – Sal Alturaigi Dec 25 '17 at 10:45
0

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

Dryden Williams
  • 1,175
  • 14
  • 22
0
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

Vasily Ivanov
  • 351
  • 3
  • 5
0

    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...

Ebi Arad
  • 1
  • 1
0

Im using overlay div on image:

<div>
<img src="{{asset('storage/img/dotbg.jpg')}}" style="width:97vh;height:7vh;">
</div>
<div style="z-index: 9;margin-top:-7vh;"> Text </div>
Ferry Setiawan
  • 1
  • 1
    Thank you for your interest in contributing to the Stack Overflow community. This question already has quite a few answers—including one that has been extensively validated by the community. Are you certain your approach hasn’t been given previously? **If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient.** Can you kindly [edit] your answer to offer an explanation? – Jeremy Caney Aug 28 '23 at 00:04
  • If you have a new question, please ask it by clicking the [Ask Question](https://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. - [From Review](/review/late-answers/34890217) – tpbafk Aug 28 '23 at 07:18