How to give Background to pdf by dompdf?

php html pdf-generation dompdf

23,111

Solution 1

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

Solution 2

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!

Solution 3

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); }

23,111

Author by

Pranoti

Updated on July 09, 2022

Comments

Pranoti almost 2 years

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.