pring html can't pring background-image

[smartwei]

I want to print a piece of HTML code that has a DIV with a background image in it, but the background image is not displayed when I print it. The code is as follows:

<div id="myPrint" style=" background-image: url(bg2.jpg); background-repeat: no-repeat;">
......html Code......
</div>

[bcorcoran]

Most browsers disable background images by default, so that's why it's happening.

To get around this, you can use a combination of relative and absolute positioning and object fit on the image to simulate the same result.

Or you can instruct users to check the "Print background images" box under the additional settings in their browser print dialog.

[smartwei]

I have solved the function of displaying the background picture when printing,add css style. The code is as follows:

<style>
        @media print {
            body {
                -webkit-print-color-adjust: exact;
                -moz-print-color-adjust: exact;
                -ms-print-color-adjust: exact;
                print-color-adjust: exact;
                box-shadow: inset 0 0 0 1000px gold;
            }

            .noprint {
                display: none;
            }
        }
    </style>

[jonsolbg]

Most browsers disable background images by default, so that's why it's happening.

To get around this, you can use a combination of relative and absolute positioning and object fit on the image to simulate the same result.

Or you can instruct users to check the "Print background images" box under the additional settings in their browser print dialog.

All morning breaking my head, THANK YOU good sir ..