title: Header and Body content overlapping while printing webpage with print mode css
body: <p>I have to print the webpage with customized header in every page,
    Below is my CSS code for print media</p>
  
  <pre><code>  @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;
      }
    } 
  </code></pre>
  
  <p>And HTML code is:</p>
  
  <pre><code> &lt;header class="onlyprint"&gt;
        &lt;img src="images/logo.png"/&gt;
   &lt;/header&gt;
  </code></pre>
  
  <p>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.</p>