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)