Creating page headers and footers using CSS for print

Question

I'm creating a PDF using Flying Saucer (which dumps out CSS/HTML to iText to a PDF) and I'm trying to use CSS3 to apply an image header and footer to each page.

I'd essentially like to put this div in the top left of each page:

<div id="pageHeader">     <img src="..." width="250" height="25"/> </div> 

My CSS looks somewhat like this:

@page {     size: 8.5in 11in;     margin: 0.5in;      @top-left {         content: "Hello";     } } 

Is there a way for me to put this div in the content?

Answer 1

Putting an element to the top of each page:

@page {   @top-center {     content: element(pageHeader);   } } #pageHeader{   position: running(pageHeader); } 

See http://www.w3.org/TR/css3-gcpm/#running-elements (works in Flying Saucer)