.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>
It worked, but the image is pushing the text down.
– Lucas Ramos
@Lucasramos note my reply that I told you that you need to treat
<div class="cancelado">
with some CSS so she doesn’t push the content you already have on your page. I edited my answer and at the end there is an HTML Snipper for you to see working. Look there– hugocsl
I managed to put it in the background, but here it is not repeating on every page. Which part of the code does this?
– Lucas Ramos
@Lucasramos Background can repeat on the X or Y axis of the element it is in, but the tag
<img>
cannot be repeated within itself. Background-repeat is unique to Background. BUT, to make the image repeat on the whole page only at the base of the gambiarra, and even so will not occupy from end to end and can harm the reading... Another option is to make an image only, very large, as "Pattern" looks at this link the idea: http://www.madaboutflags.co.uk/ekmps/shops/madflags/images/mexico-flag-stickers-21-per-sheet-106409-p.png– hugocsl
@Lucasramos Has a solution with CSS and even Background!! Only it only works in Chrome and Firefox, Internet Explore and Edge does not work...
– hugocsl
I managed to leave it on every page! Thank you.
– Lucas Ramos