background image does not come out in print (using window.print)

Question

background image does not come out in print (using window.print)

I need to print a page that has a background image as background, a dagua logo.

But using window.print() the background does not appear in imrpession (unless the user marks "background graphics" on the print page in chrome.

I searched and found a line of code in css that forces chrome to print the color of the background, but I did not find the code that forces to print the "image".

Code from Page:

   <html lang="pt-BR">
            <link href="css/impressao.css" rel="stylesheet" type="text/css">
            <script type="text/javascript" src="js/main.js"></script>
        </head>
        <body>
            <script type="text/javascript">
                window.print();
                window.location.href = '../home.php';

            </script>
        </body>
    </html>

CSS:

body{
    background-image: url(../img/MARCA.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

Ps. I synthesized the code only for the part that is relevant to the issue, for ease of understanding.

Can anyone help?

0

html javascript css impressão front-end

Author: ARodrigues, 2018-04-02

Source

1 answers

score 2 · Accepted Answer

In Chrome and Safari you can add the CSS rule:

-webkit-print-color-adjust: exact;

This will force the browser to print the colors and background images.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust