Header on first page of single page PDF export

[Will Maclean]

Hi,

I'm trying to figure out how to use CSS to put a header on only the first page of a single page export. This is the code I have so far:

@page {
 margin-top: 4cm;
 margin-bottom: 2cm;
 @top-center {
 width: 100%;
 background-image: url("https://path.to/headerimage.png");
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;
 }
 @bottom-center {
 width: 100%;
 background-image: url("https://path.to/footerimage.png");
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;
 }
}

@font-face {
 font-family: "Century Gothic";
 src: url("https://path.to/font.ttf");
}

body { font-family: "Century Gothic", serif !important}

As you can see, the header specified in the '@top-center'  tags appears on every page. Is there a '@header{}' rule or similar that I can use? Or some other way to make this work?

Thanks in advance

[Sireesha Dugginapeddi [Appfire] · Accepted solution]

Hi @Will Maclean,

Yes! There is a way to export your header content specific to the first page of the document. Try using this - 

@page :first {

@top-center {
 width: 100%;
 background-image: url("https://path.to/headerimage.png");
 background-position: center;
 background-size: contain;
 }
}

Include all the specifics to your first page in @page: first{} and others in @page {}.

Hope this works!

Thanks

Sireesha