Forced watermark for browser printing (When user has browser to not print background images)

Submitted by melinda on Wed, 12/04/2019 - 15:51

This solution came in handy for web pages that displayed "unofficial" information that users could print out.

 

HTML

<div id="printDiv">
     <div id="background">
  <p id="bg-text">Unofficial</p>
    </div>

CSS

#bg-text
{
    color:lightgrey;
    opacity: 0.1;
    font-size:120px;
    transform:rotate(300deg);
    -webkit-transform:rotate(300deg);
}