Repeating a watermark on every print page? Javascript or css

Question

So, I have this Invoice page. and i am adding a watermark behind the page. i need to repeat the watermark for each page that would be printed.

The problem is that, I

Answer 1

I would consider an overlay with a background that you repeat each 100vh. You can activate this style only on print using media query.

I used SVG for simplicity, you can easily replace with an image.

body {
  min-height: 300vh;
  position: relative;
  margin: 0;
}

body:before {
  content: "";
  position: absolute;
  z-index: 9999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: 
    url('data:image/svg+xml;utf8,<svg style="transform:rotate(-45deg)" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 60"><text x="0" y="25" fill="%23000">Lorem </text></svg>') 
    0 0/100% 100vh;
}

Answer 2

take watermark as background image

<style type="text/css" media="print">
    .content-box
    {
        background-image:url('watermarkimage.png');
        background-repeat:repeat-y;
        background-position: center;
        background-attachment:fixed;
        background-size:100%;
    }
</style>