Configuring a watermark with Dompdf ain't an easy nor intuitive task to achieve, specially if you keep in mind that there are a lot of possibilities of implementations of a watermark in a PDF. Ignoring the fact that HTML and CSS have nothing to do with the PDF format, thanks to Dompdf, the CSS compliant PDF generator for PHP, you will be able to generate PDFs using the mentioned languages. Even with this advantage, it remains difficult to know how to add a watermark. That's why in this article, we'll show you how to configure 2 of the most basic watermark behaviours in your PDF using the Dompdf library.
A. Full page watermark (business letterhead)
If you are looking to set a background image to every page, you will need to build your markup following a specific format that allows you to add top and bottom margins without messing up with the layout of the PDF. As first, you will need to set the margins of the entire PDF to 0, this will allow you to set a background image with full width and height (the same dimensions of the paper sheet). As next, you need to wrap all the content of your PDF inside a main tag, this won't have any CSS rule. You need as well, now that the page doesn't have any margin, apply them to the body (that in this case is our pdf page). As last, the most important part of the tutorial, the watermark for your PDF. The watermark needs to be a fixed div element, fixed elements in Dompdf appear on every page of the PDF, so you would only need to specify to this elements its size and margins according to your needs. This div contains inside an img that with the image that you want as background and settings its height and width to 100%.
In this example, we have as background a jpg image with the size of 2554x3310px so our markup and styles look as follows:
Note
Is important to set the z-index property of the watermark object to a negative value to prevent that it covers the content of your PDF.
<html>
<head>
<style>
/**
* Set the margins of the PDF to 0
* so the background image will cover the entire page.
**/
@page {
margin: 0cm 0cm;
}
/**
* Define the real margins of the content of your PDF
* Here you will fix the margins of the header and footer
* Of your background image.
**/
body {
margin-top: 3.5cm;
margin-bottom: 1cm;
margin-left: 1cm;
margin-right: 1cm;
}
/**
* Define the width, height, margins and position of the watermark.
**/
#watermark {
position: fixed;
bottom: 0px;
left: 0px;
/** The width and height may change
according to the dimensions of your letterhead
**/
width: 21.8cm;
height: 28cm;
/** Your watermark should be behind every content**/
z-index: -1000;
}
</style>
</head>
<body>
<div id="watermark">
<img src="background.jpg" height="100%" width="100%" />
</div>
<main>
<!-- The content of your PDF here -->
<h2>Hello World</h2>
</main>
</body>
</html>Our markup in Dompdf would generate a PDF like the following:
B. Custom page watermark
If your watermark doesn't need to cover the entire page, then it means that your image can be drawn within a specific area in the body of the page. Following the same logic of the watermark in the entire page, you need to create a fixed div with a negative z-index. Inside the div, you need to add the img tag with full height and width as this will take the same size of the watermark div. You can specify the dimensions of the watermark with CSS as well its position horizontally and vertically. The position of this watermark is totally up to you, in this example we'll add the logo of Our Code World at the middle of the page using the following markup:
<html>
<head>
<style>
/**
* Define the width, height, margins and position of the watermark.
**/
#watermark {
position: fixed;
/**
Set a position in the page for your image
This should center it vertically
**/
bottom: 10cm;
left: 5.5cm;
/** Change image dimensions**/
width: 8cm;
height: 8cm;
/** Your watermark should be behind every content**/
z-index: -1000;
}
</style>
</head>
<body>
<div id="watermark">
<img src="ocw_logo.png" height="100%" width="100%" />
</div>
<main>
<!-- The content of your PDF here -->
<h2>Hello World</h2>
</main>
</body>
</html>Generating the previous markup in Dompdf would generate a PDF like:
Note that in both of the examples, the position, width or height of your content won't be affected by the watermark as this is the point of it, an image that is set on the background and won't affect your content, however it will be visible on the impression.
Note
You can add many watermarks in the same page as you want thanks to the fixed rule in CSS. Dompdf will automatically add the same fixed elements to every page of the generated PDF.
Happy coding !
