Creating page headers and footers using CSS for print

css-paged-media, flying-saucer, pdf, pdf-generation

Solution

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)

Problem

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`?

Original source