I have a specific document. Background first and last page is different from the other pages of the document.
According to the question answered here: Flying Saucer hide header and footer on first page
The first page I defined using the trick @page :first
:
@page{
background-image: url('... my regular background ...');
}
@page :first {
background-image: url('... first page background ... ');
}
How to change the background on the last page?
If you know in advance what will be displayed on the last page, you can use CSS3 named pages.
Here is a simple example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.newpage{page-break-before:always}
@page {@bottom-center {content: element(footer)}}
#footer {position: running(footer);}
@page last {@bottom-center {content: element(lastfooter)}}
#lastfooter{position: running(lastfooter);}
#lastpage {page:last}
}
</style>
</head>
<body>
<div id="footer">Footer page 1 and 2</div>
<div id="lastfooter">Footer for last page</div>
<div>Page 1 content</div>
<div class="newpage">Page 2 content</div>
<div id="lastpage">Page 3 content</div>
</body>
</html>