How To Use Watermarks

Note

WaterMarks use other pdf as background, so images build new pdf automatically

WaterMark in all pages

To add a watermark to the PDF, use the background-image property to specify a background image

@page  {
       size: a3;
       background-image: url('img/mybackground.pdf');
}

WaterMark in various pages

Note

If you use images as background, try to use an image with the same size of the page, otherwise image will be scaled

You can use page name to separate backgrounds. All pages cover by the page name use the same background.

@page page1 {
       size: a4;
       background-image: url('img/mybackground.png');
}

@page page2 {
       size: a4;
       background-image: url('img/otherbackground.pdf');
}

Some available configurations when you use images:

background-opacity: a number from 0 to 1, example 0.5
background-object-position: position of the image in the page, set as left bottom ej. 500px 300px;
background-height: height of the image ej 50px
background-width: width of the image ej 20px
background-page-step: Use when you want to step pages without watermark, default 1

Demonstration

A background image and a background PDF.

watermarks.html

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Watermarks example</title>
<style type="text/css">
@page  {
	size: a3;
	background-image: url('img/denker.png');
	background-object-position: 500px 300px;  /* left bottom */
	background-height: 150px;
	background-width: 50px;
	@frame content_frame {
            left: 50pt;
            width: 512pt;
            top: 50pt;
            height: 692pt;
            -pdf-frame-border: 1;    /* for debugging the layout */
        }
}
@page pg1 {
	size: a4;
	background-image: url('pdf/test-invoice-bg.pdf');
	@frame content_frame {
            left: 50pt;
            width: 512pt;
            top: 50pt;
            height: 692pt;
            -pdf-frame-border: 1;    /* for debugging the layout */
        }
}
@page pg2 {
	size: a4;
	background-image: url('img/beach.jpg');
	background-page-step: 2;
	background-opacity: 0.5;
	@frame content_frame {
            left: 50pt;
            width: 512pt;
            top: 50pt;
            height: 692pt;
            -pdf-frame-border: 1;    /* for debugging the layout */
        }
}
</style>
</head>
<body>
<body>

    <h1>Resume Page</h1>
    <p>This is a resume page with in a3 pagesize.</p>


    <pdf:nextpage name="pg1" />
    <h1>Title Page</h1>
   <p> This is a title page with a large 5cm margin.</p>
   <p> Warning: Your pdf need to have transparent page.</p>
    <pdf:nextpage name="pg2" />
    <h1>Chapter 1</h1>
    <p>This is a regular page with a regular 2cm margin.</p>

</body>
</body>
</html>