NoReceipt4Panda NoReceipt4Panda -5 years ago 237
CSS Question

DOMPDF - How to render PDF to have no margins at all?

** UPDATE: I went to the settings at which my PDF was being rendered, and changed size to "Letter" instead of "A4" **

So DOMPDF is supposed to render an html page, yet with the settings I have, it's not rendering the background image to be margin-less (the bottom and right side still have margins).

Here's my css code on the HTML page being rendered:

@page { margin: 0px 0px 0px 0px; }
body {
background-image: url(../../picture.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;

Yet When rendered as PDF, here's how it looks:

There are still margins left

It might be doing this based on the settings that it outputs as, but I'm not sure. It's being rendered as an 'A4' paper, as 'portrait' layout.

How would I be able to make the margins go away, so that it stretches all the way horizontally and vertically?

Answer Source

Dompdf (up to and including 0.7.0) does not currently support the background-size CSS declaration. Until that is fully supported by dompdf you can position an image using fixed positioning. You need to know the dimensions of the page and the margins, so you might want to declare those in your styling.

Try this in 0.6 or newer:

<!DOCTYPE html>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    @page {
      size: 8.5in 11in;
      margin: .5in;
    #bgimg {
      position: fixed;
      left: -.5in;
      top: -.5in;
      width: 8.5in;
      height: 11in;
      z-index: -999
  <img src="picture.jpg" id="bgimg">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download