2

I m using Dompdf to convert Html Page to PDF. As client's requirement pdf should have watermark image at background of document. I have tried many ways in coding and also differnt css style but its not helpful. Is anybody has any idea about it? please Help me out.

hakre
  • 193,403
  • 52
  • 435
  • 836
Pranoti
  • 93
  • 1
  • 2
  • 8

3 Answers3

10

Which version of DOMPDF? With the 0.6.0 release you could use a fixed-position element to act as a watermark. Here's a document shell:

<html>
  <head>
    <style>
      #watermark { position: fixed; bottom: 0px; right: 0px; width: 200px; height: 200px; opacity: .1; }
    </style>
  </head>
  <body>
    <div id="watermark"><img src="http://code.google.com/p/dompdf/logo" height="100%" width="100%"></div>
  </body>
</html>

See an example here: http://eclecticgeek.com/dompdf/debug.php?identifier=f14b0c995add4b6c1ee1d14c0c6a987e

On 0.5.1 you could use the background-image style declaration on the body. You have less control over the styling, so you'll want to make sure the image is formatted exactly how it should appear in the document, specifically related to size and opacity. There are other issues, as well, but this does work. Here's a document shell:

<html>
  <head>
    <style>
      body { background-image: url(http://www.wolfsrainfans.com/wp-content/uploads/2011/04/Wolfs_Rain__Taboe_by_Nizira_Hathor.png); background-position: bottom right; background-repeat: no-repeat; }
    </style>
  </head>
  <body>
  </body>
</html>

See an example here: http://eclecticgeek.com/dompdf/debug.php?identifier=a05af7b814031ac5460860560a581183

BrianS
  • 13,284
  • 15
  • 62
  • 125
  • Thanks BrianS sir.. but as m using table in side div, in that case its not working.. please help me out. – Pranoti Aug 11 '11 at 11:11
  • Sample Code Like this :- "
    "     – Pranoti Aug 12 '11 at 05:47
  • BrianS sir,Thank You for guiding me n link also very useful for me. Above sample code which m using in coding. problem is when i m using background in

    tag then it is working properly but when i use table tag in coding then background is not working.

     – Pranoti Aug 12 '11 at 05:53
  • There does appear to be some rendering issues when using a table. You could specify the table width as an absolute value instead of in percent, which seems to help. Then to ensure the table contents are rendered with the correct opacity add the following style declaration: #watermark td { opacity: .1; } – BrianS Aug 16 '11 at 19:49
6

This is a common problem that I run into when using DomPDF to render my documents. to solve this problem I base64 encode any image I am trying to use as a CSS background-image and then add it like this 

url('data:image/jpeg;base64,{base64encodedimage}')

I hope this helps!

Tristan McGowan
  • 104
  • 1
  • 4
2

the background image must have the absolute path body { background-image: url(https://www.google.cl/images/branding/googlelogo/2x/googlelogo_light_color_272x92dp.png); }

Max Roa
  • 499
  • 4
  • 4