--- title: "Create PDF server-side with a custom page header and footer" canonical_url: "https://www.nutrient.io/guides/document-engine/pdf-generation/from-html/page-header-footer/" md_url: "https://www.nutrient.io/guides/document-engine/pdf-generation/from-html/page-header-footer.md" last_updated: "2026-06-08T09:14:14.345Z" description: "Discover essential techniques for creating professional PDF page headers and footers to enhance your documents' presentation and usability." --- # Customize the page header and footer You can add a custom header or footer that will be repeated across all pages of a PDF. This can be done directly from the same HTML template used for specifying the contents of the resulting PDF. ## Adding a header To define a header you want repeated across all pages of a resulting PDF, you need to specify a container element using `pspdfkit-header` as its ID, and it must be the first child of the document’s body: ```html

ACME Inc.

Always improving.

``` Before generating the PDF, the following CSS will be added before any style sheet already defined in the template. We don’t recommend overriding these properties, as it might break the header position: ```css #pspdfkit-header { display: flow-root; } ``` The `display: flow-root` declaration defines a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) and suppresses [margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) so that any margin defined inside the header is preserved entirely across all pages in the resulting PDF. ## Adding a footer To add a footer that you want repeated across all pages of a resulting PDF, you have to define a container element with the `pspdfkit-footer` ID, and it must be the last child of the document’s body: ```html ``` Before generating the PDF, the following CSS will be added before any style sheet already defined in the template. We don’t recommend overriding these properties, as it might break the footer position: ```css #pspdfkit-footer { display: flow-root; position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; width: 100%; } ``` The `display: flow-root` declaration defines a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) and suppresses [margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) so that any margin defined inside the footer is preserved entirely across all pages in the resulting PDF. ## Displaying the current page number and page count To display the current page number as part of the header and/or the footer, you can use the special `{{ pageNumber }}` token as a placeholder to tell Nutrient where to display the value on each page. Similarly, for the total page count, use `{{ pageCount }}`: ```html

Page {{ pageNumber }} of {{ pageCount }}

``` Note that it’s forbidden to use any other placeholders in curly braces (`{{ anotherPlaceholder }}`). This header (or footer) will be rejected. If you intend to use curly braces, use `{` instead of `{` and `}` instead of `}`. ## Customizing the header and footer When specifying a header and footer, you can make use of any HTML and CSS as usual, and all styles added to the main page will affect them the same way they would regular DOM elements. You can add images, use custom fonts, set a background, change font size, etc. To set a gap between the header and the content, you can use regular CSS techniques, such as specifying a `margin-bottom` declaration to the `#pspdfkit-header` selector via CSS. Similarly, you can also use CSS to set a gap between the content on each page and the footer — for instance, via the `margin-top` property in the `#pspdfkit-footer` selector. Note that the margins that are set to the page layout as part of the generation configuration will affect the space between the edges of the generated pages and the header and footer, respectively. Refer to our [page layout](https://www.nutrient.io/guides/document-engine/pdf-generation/from-html/schema.md#pdf-generation-schema-declaration) guide to learn more. ## Sample templates We have a [collection of sample templates available](https://www.nutrient.io/guides/dws-processor/developer-guides/pdf-generation.md#sample-templates) for you to try out. Feel free to download them and modify them as needed. --- ## Related pages - [Java](/guides/document-engine/pdf-generation/from-html/java.md) - [Edit a generated PDF](/guides/document-engine/pdf-generation/from-html/edit-a-generated-pdf.md) - [Generate a blank PDF](/guides/document-engine/pdf-generation/from-html/blank-pdf.md) - [Python](/guides/document-engine/pdf-generation/from-html/python.md) - [PHP](/guides/document-engine/pdf-generation/from-html/php.md) - [Create PDFs from scratch](/guides/document-engine/pdf-generation/from-html/from-scratch.md) - [JavaScript](/guides/document-engine/pdf-generation/from-html/javascript.md) - [Generate fillable PDF forms from HTML](/guides/document-engine/pdf-generation/from-html/fillable-pdf-forms.md) - [HTML template design for generating PDFs](/guides/document-engine/pdf-generation/from-html/template-design.md) - [HTML-to-PDF conversion server sample code](/guides/document-engine/pdf-generation/from-html/sample-code.md) - [HTML-to-PDF generation schema](/guides/document-engine/pdf-generation/from-html/schema.md)