Print page with Background

Question

I am working with creating and printing reports with PHP, where a web page is generated with the content of the report. I would like to place the "CANCELED" watermark when a report is cancelled. For this, I’m using an image as background, however, the image only appears on the page. When the print is called, the background remains blank. What can I do to make the background appear in the print? I’m using the following code in CSS:

@page {
  margin-top: 6cm;
  margin-left: 3cm;
  margin-right: 2cm;
}
header, footer{
  position: fixed; 
  left: 0px;
  right: 0px;
}
header, main{
  font-family: Arial;
  font-size: 18px;
  text-align: justify;
  line-height: 1.5;
}
header{
  top: -5cm;
}
footer{
  font-family: Times New Roman;
  font-size: 12px;
  line-height: 1.2;
  text-align: left;
  bottom: 50px;
  border-top: 3px solid black;
  font-size: 14px;
}
main{
  padding-bottom: 75px;
}
body {
  background-image: url('../images/cancelado.png');
}

Answer 1

You have to create a print-only CSS using Media Query Print, as below:

/*CSS para impressão*/
@media print {

}

One rule option you can make to have no problem with Background is to place the image in a div that only appears at the time of printing. Take this example:

.cancelado {
    display: none;
}

@media print {
    .cancelado {
        display: block;
    }
}

<div class="cancelado">
    <img src="cancelado.png" alt="">
</div>

OBS: You have to treat this <div class="cancelado"> with some style, like position:absolute; so it doesn’t get in the way of the rest of the content. Use Chrome’s Print Preview Engine for this, see below.

---

Vc can also enable "print view" by Chrome in Dev Tools as this image. It is easier for you to adjust your CSS only in the format Print

---

HTML template working as described above: (To see the result you must enable Print Mode, or CTRL+P)

.cancelado {
    display: none;
}
/*CSS para impressão*/
@media print {
    .cancelado {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
}

<div>

        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim dolore illum soluta rem laboriosam ipsa in harum quis vel at, iusto nesciunt placeat obcaecati commodi pariatur quibusdam architecto veniam expedita perferendis tenetur, ex reprehenderit eos? Animi exercitationem voluptatem eligendi rerum quam provident dolores suscipit, earum perspiciatis ipsam in veritatis sunt sed quia hic quas et enim dolorum. Adipisci maxime porro tenetur obcaecati veniam repellendus quae odio eos dolor est aspernatur provident voluptates accusamus, voluptatibus inventore deleniti suscipit delectus distinctio repudiandae cumque animi illo. Ipsam vitae illum id aut iure animi atque repudiandae cupiditate officiis ab tempore nesciunt quibusdam, laborum necessitatibus commodi ratione magni quia laudantium consectetur placeat perspiciatis. Optio deleniti temporibus quibusdam quam hic at iste unde ea dicta officiis, nam amet rem itaque tempora numquam consectetur voluptas nostrum, accusantium harum sapiente eum asperiores nulla facilis? Porro fugiat quam consequatur cumque illo. Architecto odit numquam et molestias, vel, ipsum id maxime beatae illum aperiam ad amet nesciunt nulla. Omnis ipsum aperiam facilis, dolore mollitia quos accusamus similique nisi cumque? Quidem perferendis repellat fugit quas aliquid voluptatibus, quasi incidunt dicta quis tenetur minus animi maxime voluptatem quisquam exercitationem. Doloremque numquam assumenda vero voluptates. Dolor molestiae neque corrupti quibusdam mollitia accusamus molestias porro assumenda distinctio reiciendis praesentium vel consectetur, dolorem totam provident error maiores minima eveniet voluptas. Voluptatibus doloribus dolorem culpa quam voluptatem eos exercitationem velit quod odio. Praesentium optio amet reiciendis in est fugiat vel nisi harum cupiditate enim repellendus blanditiis voluptatibus quas, omnis aliquid sit ducimus earum laudantium quidem id culpa vero aliquam. Ab doloremque, sequi similique facere et cumque repellat deserunt illum culpa voluptatum! Doloremque voluptatem veritatis doloribus tempore, temporibus odio, in voluptates placeat optio molestiae quia recusandae, nulla officia dolor tenetur asperiores adipisci nesciunt tempora odit facilis enim? Adipisci exercitationem dignissimos fugit eos placeat quam maxime repellat consequuntur dolore! Aliquid voluptate inventore labore amet veniam, odit voluptates voluptatem quam officiis error illo tempora consequatur, blanditiis molestias sapiente nam est ex ipsam provident! Voluptate officia necessitatibus dolores ex est obcaecati exercitationem nostrum voluptates. Culpa omnis nam laboriosam quo consequatur. Unde modi atque at ratione velit quas non quo a quam rem debitis voluptas sequi tenetur, totam, suscipit itaque earum deleniti. Quam ducimus dolorem laborum distinctio quia quaerat error, eaque odit quis autem repellendus doloremque libero saepe. Maxime, molestias. Quasi maxime soluta facere quae. Error, debitis! Eaque soluta voluptate tempora quis possimus officia fugiat quasi odit dicta aut, a iure tempore et consequatur ut corrupti quia mollitia sequi amet doloremque architecto! Neque voluptatem accusantium officia explicabo quasi suscipit nisi pariatur, expedita veritatis accusamus eos, itaque, eveniet ab tempora. Dolor, excepturi. Accusamus voluptatem quos assumenda odio totam est quidem ab hic. Modi expedita fugit assumenda pariatur aperiam! Commodi eius impedit nobis odio ducimus repellendus corporis sed libero dolorem excepturi ipsa laborum quas minus perferendis dicta, distinctio placeat adipisci tenetur? Fuga aut doloribus similique laborum cupiditate autem quasi nesciunt maiores ipsa. Minima sequi, dolore nisi quam ut quidem quas explicabo nesciunt labore ea reprehenderit quo praesentium exercitationem at repellat officia inventore quasi minus consequatur cupiditate natus vero. Odit placeat maiores reiciendis deleniti repellat modi nobis sit quis delectus similique aliquid nemo cum ipsam, eligendi iusto a sunt tenetur atque labore facere accusamus dolores quisquam. Voluptatum veritatis odit repudiandae! Debitis delectus nostrum deleniti, quidem cumque atque expedita dignissimos accusantium aut distinctio exercitationem, voluptas tenetur tempore minus, natus obcaecati blanditiis quae hic quam illo tempora deserunt! Mollitia, explicabo. Ea ducimus nobis odio quibusdam quaerat nesciunt rerum assumenda, totam similique iusto accusamus eveniet perferendis, sapiente doloribus quo dolor? Officiis eligendi laborum atque ad fugit nemo doloribus harum, velit illo rem sint vero facere quam molestias voluptates quisquam tenetur at deleniti debitis necessitatibus exercitationem amet nisi? Voluptates corporis necessitatibus neque laborum distinctio ut reiciendis nemo, quo quos consequatur debitis ipsam magni, labore facere itaque veritatis soluta, suscipit nulla maiores. Impedit, ipsam accusantium? Corporis consectetur dolores temporibus totam ea modi asperiores? Delectus nihil nostrum impedit harum! Ab, aspernatur? Illum repudiandae totam nihil. Repudiandae fugit commodi vero quaerat, perferendis deserunt suscipit minima distinctio tempora quas, nulla officiis, ducimus veritatis non maiores sit earum error ipsa culpa animi totam officia saepe neque eius! Id, odit unde qui sapiente ipsam corrupti voluptas sequi tempore beatae officiis. Ratione aliquam porro esse ab alias corporis omnis, minima ullam sequi. Fuga voluptate, sint ab praesentium dolores voluptatem! Illum dicta facilis corrupti ut voluptate! Molestias eum officiis velit reprehenderit repudiandae facilis quia rem officia quasi dolores at recusandae animi dolorum ullam aliquid sunt eligendi dignissimos adipisci, culpa provident, vel, eaque suscipit. Natus ea sequi deserunt consequatur voluptas commodi libero cum aut quam voluptatem? Vitae aperiam ipsa voluptatum alias adipisci iusto non beatae molestiae laudantium! Veniam porro possimus illo perspiciatis doloribus impedit, dolorem maiores nisi voluptates odit ullam sapiente veritatis at rerum aliquid id voluptatem cumque officiis earum asperiores! Assumenda rerum optio temporibus libero eos deserunt accusantium necessitatibus aut est reprehenderit quia iusto quod cumque provident, error fuga quis! Possimus ratione velit necessitatibus laudantium qui, facilis, fugit dicta illo temporibus nobis nam distinctio consequuntur reprehenderit illum id. Reiciendis quia quisquam soluta velit, cupiditate aperiam similique ea consectetur aut reprehenderit perspiciatis exercitationem voluptatibus culpa quaerat saepe quam. At aut nam blanditiis, maiores perferendis dolores necessitatibus incidunt, impedit eveniet deserunt unde cupiditate soluta. Quibusdam laborum reprehenderit corporis ab porro! Ipsam maxime provident, doloribus, natus modi molestiae ullam, autem deserunt labore itaque nesciunt. Quo officia est ipsam alias reprehenderit, minus temporibus voluptatum natus eius inventore eaque necessitatibus debitis? Nostrum repellat atque itaque in officia qui veniam velit facere debitis et, corporis possimus. Laborum dolorem accusantium porro fuga aliquam at corrupti necessitatibus, sit officiis eaque totam dolores, architecto soluta nemo quos voluptas voluptates. Dolor nobis deserunt porro. Quia ipsam mollitia tempora! Nihil cum recusandae accusantium corrupti in iste, voluptatum consequatur quae quo incidunt repellendus harum a ipsa id sit dolores tempora minima tenetur aperiam quam magni aliquam maxime vitae veritatis? Nesciunt ducimus ut quod vero saepe obcaecati aperiam, esse iste officia ex odit, at necessitatibus. Id autem mollitia corporis molestiae dicta adipisci nemo, distinctio, consectetur dolores ullam, modi quo.
    </div>

    <div class="cancelado">
        <img src="http://placecage.com/300/300" alt="">
    </div>

Image the above code in print mode in Chrome:

Answer 2

In addition to the css you already have, add the following:

@media print {
        body { 
            content: url('../images/cancelado.png');
        }
    }

Answer 3

  @media print body {
     background-image: url('../images/cancelado.png');

   }

or

 @media screen and (min-width: 480px) {
        body {
            background-image: url('../images/cancelado.png');
        }

 }

https://www.w3schools.com/css/css3_mediaqueries.asp