I have a document with chapter titles that use a background image. I also want to have a running header on all pages, but which gets hidden below the background image of the chapter titles. The attached image shows the header in the top right page region (301-6580) showing over the background image. I have tried using z-index to push the running header below the background image but it does not work. Does page region content always lie on top or is there a way to push it down below a body element?

1. example.png‎ 22.4 kB

Perhaps you could disable the running header on the first page of chapters, like this:

@page chapter {
    @top { content: "header" }
}
@page chapter:first {
    @top { content: none }
}
div.chapter {
    page: chapter;
    prince-page-group: start;
    page-break-before: always
}

Thanks mikeday! That worked perfectly. In my case the coding was a bit more complicated as the HTML is generated from XML:

@page performance {
@top {
content: "Performance Characteristics";
font-size: 0.9rem;
font-family: var(--body-font);
color: var(--regulatory-color);
vertical-align: middle;
background-image: url("../icons/exclamation-color.svg");
background-repeat: no-repeat;
margin-left: 110mm;
margin-top: 0;
text-align: right;
margin-right: -10mm;
}
}

@page performance:first {
@top { content: "" };
}

article.nested1:nth-of-type(4) {
page: performance;
prince-page-group: start;
}

I've added a screenshot to show you the result, with a part redacted in black.

1. example.png‎ 107.0 kB