CODEWITHSUNDEEP
cssmedia-queries
Weston Watson
Weston Watson

Reputation: 5724

CSS @media print issues with background-color;

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.

Upvotes: 260

Views: 308756

Answers (23)

Ferry Setiawan
Ferry Setiawan

Reputation: 1

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>

Upvotes: 0

drolex
drolex

Reputation: 5521

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

Upvotes: 404

raqibnur
raqibnur

Reputation: 113

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

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

Upvotes: 1

vnapastiuk
vnapastiuk

Reputation: 659

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

Upvotes: 7

Ebi Arad
Ebi Arad

Reputation: 1

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

Upvotes: 0

Vasily Ivanov
Vasily Ivanov

Reputation: 380

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

Upvotes: 0

T4NK3R
T4NK3R

Reputation: 4363

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

Upvotes: 100

Dryden Williams
Dryden Williams

Reputation: 1305

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

Upvotes: 0

The Aelfinn
The Aelfinn

Reputation: 16948

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.

Upvotes: 6

John
John

Reputation: 131

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

Upvotes: 3

Basheer AL-MOMANI
Basheer AL-MOMANI

Reputation: 15327

-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

Upvotes: 30

Heroselohim
Heroselohim

Reputation: 1291

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>

Upvotes: 2

Aamir Shaikh
Aamir Shaikh

Reputation: 83

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>

Upvotes: 6

Jonathan
Jonathan

Reputation: 31

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

Upvotes: 2

nuts-n-beer
nuts-n-beer

Reputation: 255

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;

Upvotes: 8

ksealey
ksealey

Reputation: 1738

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

}

Upvotes: 0

kernel
kernel

Reputation: 3743

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

Upvotes: 6

user4140940
user4140940

Reputation:

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

Upvotes: 0

yar1
yar1

Reputation: 1351

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

Upvotes: 11

Gedeon
Gedeon

Reputation: 31

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

Upvotes: 1

MAXE
MAXE

Reputation: 5122

Try this, it worked for me on Google Chrome:

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

Upvotes: 36

alano
alano

Reputation: 35

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.

Upvotes: 1

Ryan Ternier
Ryan Ternier

Reputation: 8804

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.

Upvotes: 280

Related Questions