Daniel Daniel - 3 months ago 21
CSS Question

Printable Bootstrap content

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

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