CODEWITHSUNDEEP
css
Parthajyoti Sarma
Parthajyoti Sarma

Reputation: 49

Background image is not display in print preview

I am Using laravel 5.4, but not display in print preview. What to do..?

.bg {
  @media print {
    visibility: visible;
    /* The image used */
    background-image: url("../logo/back_id_card.JPG");
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-print-color-adjust: exact;
  }
}

Upvotes: 5

Views: 7837

Answers (2)

Jithin Raj P R
Jithin Raj P R

Reputation: 6827

I think your code is wrong:

This should be:

.bg {
  @media print {
    visibility: visible;
    /* The image used */
    background-image: url("../logo/back_id_card.JPG");
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-print-color-adjust: exact;
  }
}

Like this:

@media print {
 .bg {
    visibility: visible;
    /* The image used */
    background-image: url("../logo/back_id_card.JPG");
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-print-color-adjust: exact;
   }
}

.bg should be inside the @media print not the other way around.

hope this was helpful for you.

Upvotes: 1

Torjescu Sergiu
Torjescu Sergiu

Reputation: 1533

Please try this to see if the problem persists(applies to all elements*):

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

The -webkit-print-color-adjust property is a non-standard CSS extension that can be used to force printing of background colors and images in browsers based on the WebKit engine.

Upvotes: 11

Related Questions