Header and body contents overlap when printing a web page in css print mode

Question

I need to print a webpage with a custom title on each page. Below is my CSS 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 header */ margin-top: 0; } } 

And the HTML code:

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

But the problem is that only on the first page the logo is correctly printed, and from the second page the logo is superimposed on the body. CSS HTML does not work from the second page.

Answer 1

It seems that this task cannot be correctly implemented using CSS alone.

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

A brief summary of this link content: IE and Firefox will repeat the <thead> element on each print page, while <tbody> will print continuously without repeating.