How to select the nth() page of a document section with PDFreactor? - css-paged-media

Question

I am evaluating PDFreactor to produce PDF from HTML & CSS.
However I have run into a problem - I need to set the page background image different for the 1st and 2nd and 3rd pages of a document section. The only way it seems to be possible (looking in the PDFreactor manual), is to explicitly give the fixed document page number, rather than a number that is relative to the document section.
CSS Generated Content for Paged Media Module suggests I would use this notation;
CSS:
#page:-nth(1 of PPSid1117) {
background: url("http://example.com/bg1-section1.png") no-repeat center center;
}
#page:-nth(2 of PPSid1117) {
background: url("http://example.com/bg2-section1.png") no-repeat center center;
}
#page:-nth(3 of PPSid1117) {
background: url("http://example.com/bg3-section1.png") no-repeat center center;
}
#PPSid1117 {
page: PPSid1117;
}
HTML:
<div id="PPSid1117">Up comes 10 pages of lorem ipsum, the first three pages having different backgrounds... etc etc ...end of section.</div>
But it does not work at all - it throws a parse error;
Parse error in resource "main_css.php?doc=50"
Encountered '1' at position 11 in rule '#page:-nth(1 of PPSid1117)
BTW, -ro-nth DOESN'T throw an error but still does not work - ie.
#page:-ro-nth(1 of PPSid1117) {
background: url("http://example.com/bg1-section1.png") no-repeat center center;
}
This code puts the it on every left page of the section (so it proves the named page selector works at a basic level) but is not what I want at all.
#page PPSid1117:left {
background: url("http://example.com/bg1-section1.png") no-repeat center center;
}
This works but it means I have to hard-code the page number. Not what I want to do...
#page:-ro-nth(4) {
background: url("http://example.com/bg1-section1.png") no-repeat center center;
}
This puts it on page 1 of the document, not page 1 of the section.
#page PPSid1117:-ro-nth(1) {
background: url("http://example.com/bg1-section1.png") no-repeat center center;
}
This does what I want in Prince XML.
#PPSid1117 {
page: PPSid1117;
prince-page-group: start;
}
#page PPSid1117:nth(1) {
background: url("http://example.com/bg1-section1.png") no-repeat center center;
}
Does anyone have any helpful suggestions? Thanks.

Answer 1

If you want to set a background to the first, second and third page it is as simple as defining
#page :nth(1) {
background: url(path/to/img) 0 0 no-repeat;
}
#page :nth(2) {
background: url(path/to/img) 0 0 no-repeat;
}
#page :nth(3) {
background: url(path/to/img) 0 0 no-repeat;
}
This definitely works with PrinceXML and if PDFReactor works with the W3C specs it should work too.