How can I force browsers to print background images in CSS?
With Chrome and Safari you can add the CSS style -webkit-print-color-adjust: exact;
to the element to force print the background color and/or image
Browsers, by default, have their option to print background-color
s and images turned off. You can add some lines in CSS to bypass this.
Just add:
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
color-adjust: exact !important; /* Firefox 48 – 96 */
print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
}