How do I conditionally select DIVs that appear on top each page on 'print' mode?

Question

I have a page which is created dynamically with the user interaction, with many DIVs with variable sizes and other nested components. Some of them are displayed side by side, some will display on the next line. Once I call window.print(), they are reorganized by each browser, with the help of

@media print { .myDiv { page-break-inside: avoid; } }

I want to add a header with image on top of each print page, but using position: fixed won't work on Chrome or Safari (as of 03-31-2016). I don't want to calculate page size or components heights, since the user can always change the margins.

Considering I can dynamically add another <div class="print-header"> before each <div class="myDiv">, I would want something like this:

@media print { 
  .print-header { display: none; } 
  .print-header:first-of-the-page { display: block; } /*pseudo css*/
}

JS solution is acceptable too.

---

More Details [added on 04-01-2016]

Original problem: to set a logo (<img>) as header of all printing pages on Chrome, Firefox, Safari and IE11 (bonus).

Option 1: using an HTML5 API. NOT AVAILABLE

Option 2: using @media print { .print-header{ position: fixed}} to show the element on all the printing pages GOOD FOR FF and IE ONLY

On Chrome and Safari it only shows it on the 1st page . See a code sample on MDN's Printing a document

Option 3: Add header based on sizes and position calculated at print time. ERROR PRONE

This means calculating the width and height of all components to forecast which of them will fit in on a print page, then add a jQuery.clone() of the header element on a position defined by pageHeight + i, where i is 0, 1, .. n and n is the # of pages on the printed document.

Option 4: Conditionally select the element which shows on the top of the print page. INITIAL QUESTION

In CSS I can use :first-of-type to get the 1st child of a type under a given parent. Is there any similar way to getting the 1st child on each print page? Is there a way to know, at print time, what belongs to each page, using CSS or JS?

---

Related Links

Apparently they won't provide a definite solution, but I may have missed something:

1. How to use HTML to print header and footer on every printed page of a document?
2. Print footer on every printed page from website, across all browsers (Chrome)
3. Having Google Chrome repeat table headers on printed pages
4. How to apply some styles to first and last elements on a print page?
5. Using CSS and/or jQuery for Printed Pages with Page Breaks

---

Action: Printing a document by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Answer 1

Here is a sample on how to accomplish the previous task with HTML and CSS:

<div id="print-header">
    <img src="img/logo.png" width="200px" height="50px" >
</div>

#print-header{    display: none;  }
@media print {
    #print-header {
        display: block;
        position: fixed;
        top: 0pt;
        left: 0pt;
        right: 0pt;
        text-align: right;
    }
}

NOTE: Showing header on all pages was fixed on Chrome