Running elements

Create custom header and footer for your pages.

Running elements are HTML elements that are moved out of the content flow and into the page context.

To create a running element, you will need to perform two steps:

First, define which element should be a running element. This is done by using the position property and the running() function. The running() function takes an identifier as an argument, which can be any valid identifier and will be used as the element's id.

<body>
    <div id="header">
        Any header content can go here
    </div>

#header {
    /* Position element as running with the id "my-header" */
    position: running(my-header);
}

Then place a running element in a page margin or page area, you will need to use the content property and the element() function. The element() function takes an identifier as an argument, which should be the same identifier used when defining the running element.

@page {
    size: A4;
    margin: 5cm 2cm 2cm 2cm;
    
    @top-center {
        content: element(my-header);
    }
}

That's all there is to it! Now, the element with the header identifier will be repeated on each page. You can also create additional running elements for other page elements, such as a footer, using the same process.

If you plan on adding a footer element to each page of your paged media using running elements, it is important to make sure that the footer element appears at the beginning of your document flow, rather than at the end. This is because running elements are moved out of the normal content flow and into the page context, and if the content is not present at page generation time, it will not be displayed.

PreviousPage groupsNextBleed area

Last updated