CSS @media print issues with background-color;

Question

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.

Carrillo

Well, it passes the W3C CSS-Validator (jigsaw.w3.org/css-validator). That's weird – Oversee

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). – Guanine

@MartinThoma How did you fix the problem? Did you removed the CSS from the boostrap templated? – Elaterid

Answer 1

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.

Chlorophyll

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 – Mindoro

@MarcoBettiolo doesn't seem to work on the latest webkit builds, !important does however – Fpc

Adding !important to the rule solved it for me also. – Torus

where is this settting in chrome? – Kimes

No effect for me in FF or IE. This was solution for me. – Crowded

Also not working at least properly in chromium browser. Please have a look here. #34429321 – Spurge

@MarcoBettiolo Mozilla has marked this property as non-standard so it has inconsistent results developer.mozilla.org/en-US/docs/Web/CSS/… – Dita

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

Dont set the background colour in the print stylesheet. Just so it in the normal CSS and it will work fine. ``` <div style="background-color: blue;"> Content with background </div> ``` – Starveling

Is the advice found in this answer still relevant in 2019? Maybe we could get an update. – Vertebral

Answer 2

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

Alagez

This seems to have solved my issue with printing a table with alternate row colors. – Petrolic

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) – Appalachia

what is the alternate in firefox and IE – Benignity

A note for future time travelers: you might want to use color-adjust instead. – Ukulele

@КонстантинВан it's not supported in Chrome as of April 2019. This is firefox documentation. – Azurite

Works on year 2022 Chrome Version 98.0.4758.80 (Official Build) (x86_64) – Mushro

Worked for me in Firefox 122.0 and Chrome 121 in 2024 – Pigling

Answer 3

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

Eileneeilis

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 css-tricks.com/css-sprites-with-inline-images, that will give you images in IE9 and FF (not IE8 though) – Statement

Works great in normal browsers, but not in IE, even with the suggestion from @evami. – Suction

@Suction 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? – Statement

I copy-and-pasted your CSS, but I am using IE10. Could that be the difference? – Suction

10000px is more secure. – Levorotation

This doesn't seem to work with the latest Chrome (60). – Witch

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). – Hardheaded

Answer 4

Try this, it worked for me on Google Chrome:

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>

Jaine

Answer 5

-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

Miocene

Maybe it's because you already have a @print stylesheet that resets the background color. – Stoeber

OMG! it is working but how this is working ? Can you please explain. – Nealson

That's the only solution that worked for me so far. <div style="-webkit-print-color-adjust: exact !important;background-color:red !important;">...</div> – Azurite

Answer 6

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

Enthetic

!important solves the problem in every modern browser, as long as "Print Background Colors and Images" is enabled. – Viccora

!important also works without user intervention if you use it together with body { -webkit-print-color-adjust:exact; } (as per comment above) – Enthetic

i've found that if I use color-adjust or the webkit variant I do not in fact need the important rule. – Standley

Answer 7

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;

Vanesavanessa

Answer 8

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

Necessaries

it's a mad hack, but it at least forces some form of background colour regardless of the print settings. brilliant, thanks. – Lanark

Answer 9

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>

Morel

Answer 10

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.

Kaiserism

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! – Samoyedic

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

Answer 11

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

Valora

Answer 12

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

Iconoscope

Answer 13

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 */

Square

Answer 14

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>

Crore

Answer 15

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.

Ajit

Answer 16

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

Parboil

Answer 17

* {
  -webkit-print-color-adjust: exact;
}

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

Zsa

Answer 18

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

Historiographer

Answer 19

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

}

Kurdish

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

Answer 20

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

Starveling

Answer 21

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

Eanes

Answer 22

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

Redintegration

Answer 23

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>

Gentilesse

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? – Flyblown

If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review – Conspicuous