CSS @media print not working at all

First, I'd try adding a space after print. May not make a difference, but.....

@media print {
     /*print css here*/
}

Next, printing in browsers usually ignores background colors. Try using 'box-shadow'....

@media print {
     #bruikleenovereenkomst {
         width: 100%;
         height: 500px;
         box-shadow:  inset 0 0 0 1000px #000;
     }
}

Smashing Magazine has some excellent pointers: http://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ Note that they talk about printing from a Webkit browser (Chrome or Safari, for example), and attempting to force the printer to render the colors as they appear on-screen by using a separate media query.....

@media print and (color) {
   * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}

Hope this helps!


If you are using @media print, you need to add !important in your styles, or the page will use the element's inline styles that have higher priority.

E.g.

<div class="myelement1" style="display:block;">My div has an inline style.</div>

In @media print, add !important and be a winner

@media print {
   .myelement1, .myelement2 { display: none !important; }
}

Tags:

Html

Css

Printing