Header and Body content overlapping while printing webpage with print mode css

Question

I have to print the webpage with customized header in every page, Below is my CSS code for print media

  @media screen {
      header.onlyprint, footer.onlyprint,.watermark{
          display: none; /* Hide from screen */
      }

  }
  @page {
    size:A4;

 }
  @media print {
    @page {
            size:auto;
            margin-top:2mm;

   }
   html{
     margin-top: 20mm;
   }
    header.onlyprint {
        position: fixed; /* Display only on print page (each) */
        top: 0; /* Because it's header */
        margin-top: 0;
    }
  } 

And HTML code is:

 <header class="onlyprint">
      <img src="images/logo.png"/>
 </header>

But the problem is only in first page the logo is printing properly and from second page the logo is getting overlapped with body content.the CSS of HTML is not working from second page.

Answer 1

It seems this task cannot be properly implemented with CSS only.

I found a workaround for IE and Firefox using tables here: http://www.jessicaschillinger.us/2017/blog/print-repeating-header-browser/

Quick summary of that link's content: IE and Firefox will repeat the <thead> Element on every printed page, whereas the <tbody> will be printed continuously without repetition.