Log in / Register

Forum › How do I...?

Overlay on all pages, covering the entire page

moss
I need to have an overlay on the page that will display an image across it, something like:

<div id='overlay' style='position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(demo.png) repeat left top; z-index: 9999;'></div>


However, this is only visible on the first page after the PDF is generated with Prince.

I had a look at this question, and used the suggested workaround. The problem with that approach is that the overlay is only applied where there is content whereas I want the overlay to apply to the whole page, regardless of the content size on a given page.

Is there a way to do this? We're using 10r3.
mikeday
You can place the image in a page margin box (which repeats on every page) and then position it over the main page content.
moss
Thanks for the suggestion.

I've done this:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
@page
{
    @top { content: flow(overlay) }
}
#overlay { flow: static(overlay); background: url(watermark-demo-document.svg) repeat left top; width: 100%; height: 100%; }
    </style>
</head>
<body>
    <div id='overlay'></div>
    <p>Lorem ipsum...</p>
</body>
</html>


This will display the watermark, however only in the top page margin box and not covering the whole page. I've been looking at the documentation and reading about @page and playing around with the code, but I haven't been able to alter the position of it. How do I do that and "position it over the main page content"?
mikeday
It's easier if you add a div inside the overlay which can then be absolutely positioned:
<div id='overlay'><div id='back'></div></div>

#overlay {
    flow: static(overlay);
}

#back {
    position: absolute;
    background: url(watermark-demo-document.svg) repeat left top;
    border: solid red thin;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}
moss
This has worked. Thanks.
pencir
Hello,

What is this method: 
flow: static(overlay);

Where are all the css methods that prince is using?
I am trying to understand Prince and I'm having a hard time finding where this type of information is stored in the documentation, or even if it is stored in the documentation. Thanks.
csant
It is documented here: https://www.princexml.com/doc-prince/#content-taking-elements