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


Tags: css,pdf,pdf-generation,dompdf

Problem :

** 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?



Solution :

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>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style>
    @page {
      size: 8.5in 11in;
      margin: .5in;
    }
    #bgimg {
      position: fixed;
      left: -.5in;
      top: -.5in;
      width: 8.5in;
      height: 11in;
      z-index: -999
    }
  </style>
</head>
<body>
  <img src="picture.jpg" id="bgimg">
</body>
</html>

    CSS Howto..

    How to apply style rules that are tied to a model in AngularJS?

    Hide all div element but show first two

    How can I split this image into pieces so when I write a long text, it doesn't go outside of the div?

    How to create a frosted glass effect using CSS?

    How to add container without destroying table

    how to make the title bar fixed

    How To Use CSS To Style The Output Of JavaScript

    How to apply CSS to other elements except the hovered one?

    How to create a horizontal scroll bar when shrinking the window

    How to center text inside div in this specific situation? [duplicate]

    How can that view be achieved? Collage / Magazine Products

    How to place 2 spans beside each other with full width with CSS

    How can I get this menu to hug the top of the page, widen out, and provide some space below it?

    how can i create true loop?

    How to style jQuery UI's autocomplete list for mouse leave event?

    CSS: how to make background on left and right of the content

    how to pass jquery variable value into css property value?

    How to set textbox width fit in table cell CSS

    Search type links in Yahoo - how to implement similar behaviour

    How to DRY up on SASS transitions with multiple elements?

    CSS: How do I stop hover effects from pushing my text?

    How to edit .css file from html via jquery

    CSS: How do I centre an element relative to its parent while right-aligning its sibling?

    how to show line without space in next line when screen gets smaller?

    How to change CSS with jquery?

    How do I style the Nivo Slider thumbnails?

    How to align a list to an image, and jquery problems

    How do I keep my elements on the same horizontal line?

    How to make CSS background-image responsive? [duplicate]

    How to center text vertically in a flex box?