Printable Bootstrap content

Question

I'm currently working on a project using Bootstrap 3.3.7 along with a lot of custom CSS and I'm having trouble generating printable content.

A small example

.bg-stretch {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 background-size: cover;
 background-image: url("https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg");
}

<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="bg-stretch"></div>

This generates an image background that looks fine, but if I try to print it in Google Chrome using Ctrl+P, even when I have checked, all I get is a blank page without the image.

If I disable bootstrap (remove the <link>), then everything works perfectly.

I have tried to solve this with the answer posted in this question, but adding CSS to

@media print {
    /* Your styles here */
}

did not solve my problem.

How can I fix this?

Answer 1

These are styles from bootstrap.css file.

@media print {
  *,
  *:before,
  *:after {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }
}

Try to remove background: transparent !important from this.

Alternatively you can add !important rule to you background in CSS:

.bg-stretch {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-size: cover;
  background-image: url("https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg") !important;
}

Answer 2

Use This CSS code:

@media print{*{text-shadow:none !important;color:#000 !important;background:transparent !important;box-shadow:none !important;}