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

Asked

Viewed 2,303 times

0

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 the image (unless the user marks "background Graphics" on the Chrome print page.

I searched and found a line of css code that forces Chrome to print the background color, but I couldn’t find the code that forces it to print "image".

Code of the 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 question, to facilitate understanding.

Anyone can help?

javascript html css front-end impression
  • 1

    Your problem is that the printer by default does not recognize anything that is like Background. Here is an answer that will help you! https://answall.com/questions/274605/aplica-marca-d%C3%A1gua-sem-afetar-o-texto? noredirect=1 if it doesn’t suit you put your code in the question that gets easier!

  • It is not the case. The image was treated to look like Water mark, and did not get this feature through code.

  • Does your body and HTML have height and width set? Type: html, body { width: 100%; height: 100%; }

  • Yes they are. Page view is ok. The only problem is that when printing this image set as background does not appear in the print. (from what I understand this is standard Chrome, unless the user clicks on the ''Background' box on the print screen. What I need is for this box to be checked when the code asks for the page to be printed

  • Dude, I don’t think you’re gonna be able to turn this on for a browser security issue. Otherwise you can consult this other answer that should suit you https://answall.com/questions/269790/imprimir-p%C3%A1gina-com-background/269803#269803

  • what tag you used to "force" the impression of background-color?

Show 1 more comment

1 answer

3


  • I hesitate mine. I had found this line of code, however I thought it was limited to the attribute 'background-color". I put it but I changed it to "-Webkit-print-IMAGE -Adjust: Exact;", obviously it didn’t work. Thank you very much..

Browser other questions tagged javascript html css front-end impression

You are not signed in. Login or sign up in order to post.