Forum How do I...?

Background Image doesn't repeat across page break.

cgrether
I have a simple css addition that I'll do to stamp a large warning across a document. This works perfectly fine in the browser (although printing background images is a separate problem). But when I have Prince turn it into a PDF it doesn't repeat across pages. On the first page it looks perfectly fine.

Example CSS:
.draft {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
background-image: url(data:image/png;base64, ....SNIP....); <!-- Too large
background-repeat: repeat-y;
background-size: 100% auto;
-webkit-print-color-adjust: exact;
}

Perhaps this is a bug. Perhaps I'm missing something that would continue it across page boundaries.

Any idea?
mikeday
Prince does not split absolutely positioned blocks across page boundaries. To make it repeat on every page, you will need to move it to a page margin box, or put it on the @page background.
cgrether
Well it shouldn't repeat on every page. Say things like pages 3,4,17,18,19,33,45.

It should only exist over the section that it relates to.

This might be a background image but it isn't actually in the background. It is a foreground image overlaying everything else.
mikeday
That's entirely reasonable, and I'm not sure how to do it at the moment. Covering a multi-page element with a repeating background seems like something that should be possible, but it may require some trickery. We will investigate. :)
cgrether
Thank you for your support. If you need explicit examples I can provide it but it sounds like you know how to trigger it yourself.
mikeday
Okay, how about this! It works in the browser and in Prince:
<div style="background: url('..path to image...'); position: relative">
<div style="z-index: -1; position: relative">
Here is the content.<br/>
Here is the content.<br/>
Here is the content.<br/>
</div>
</div>

So the content is inside the draft element, and the content has negative z-index to push it below the parent's background. The relative positioning is just so that z-index will apply, it doesn't actually move the elements. Page breaking should be unaffected.
cgrether
That works. Thanks.