How to force background image to print in HTML?

Question

I need to print a report page that has several background images. But only these images are not printable. These images are actually logos for the graph and are therefore very important in the report.

I have another option that I can crop and include in the page as a tag, but this is the last option. So before that, I would like to know if there is a way to force these images to be printed? Can anybody help me?

Answer 1

By default, the browser will ignore css background rules when printing a page, and you cannot overcome this with css.

The user will need to change his browser settings.

Therefore, any image that needs to be printed should be displayed as an inline image, not a css background. You can use css to display the inline image for print only. Something like that.

HTML

<div class"graph-image graph-7"> <img src="graph-7.jpg" alt="Graph Description" /> </div> 

CSS

 .graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;} .graph-image img{display: none;} @media print{ .graph-image img{display:inline;} } 

Using this code or similar code means that the image is used once in html and once in css. The html version is hidden using css, and for printing it is displayed as usual. This is a hack, but it will do what you want. He will print the image.

Having said that, you are doing terribly bad practice. Nothing that conveys meaningful information to the user should be transmitted using only css. This is not only semantically incorrect, but also makes the schedule less useful for users. The embedded image is much better, and if you can, then what should you use.

Answer 2

it works in google chrome when adding an important attribute to the background image, make sure you add the attribute first and try again, you can do it like tha

 .class-name { background: url('your-image.png') !important; } 

also you can use this useful print roll and put it at the end of the css file

 @media print { * { -webkit-print-color-adjust: exact !important; /*Chrome, Safari */ color-adjust: exact !important; /*Firefox*/ } }