Displaying A Different Header On The First Printed Page With Html And Css

Is it possible, with any mix of HTML and/or CSS, to display one header on the first printed page and then display a different header on each subsequent printed page? I know about

Solution 1:

The only way I can see how to do it is to use different headers and forced page-breaks.

So

PAGE 1HEADER1 //display only on print

   CONTENT....

   PAGE BREAK DIV //display only on print

PAGE 2HEADER2 //display only on print

   CONTENT....

   PAGE BREAK DIV //display only on print

etc..

Your headers would get a class of printHeaders

Your page break div would be something like <div class="pageBreak"></div>

In your CSS, you would have something akin to

.printHeaders, .pageBreak  {display:none;}

@media print {
  .printHeaders, .pageBreak  {display:block;}
  .pageBreak  {page-break-before:always;}
}

Solution 2:

from http://css-discuss.incutio.com/wiki/Printing_Headers

If you want full, CSS-controlled print headers and footers, you'll need to wait until browsers implement support for the CSS3 Paged Media Candidate Recommendation. It explicitly provides for the facility but in a quite different way, using margin boxes.

probably because...

... the CSS description of position: fixed, [is] namely "... In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page ..." [Section 9.3.1]

...but the article says it doesn't work as of these days.

BUT, to help you, later the article says:

Setting a top margin on body (for example) will work only for the first page.