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 prevent left “post” section from dropping off?

    How to fade loop background images in Twitter's Bootstrap 3

    How to darken the background image in CSS? [duplicate]

    How to implement single-line ellipsis with CSS

    How can I float dynamic div's next to each other?

    How can I remove this white space from a table?

    How to anchor a dynamic div to the screen?

    How to version files in the section?

    how do I give partition in the
    tag?

    How do I achieve my bootstrap nav design?

    How to change image size when nested in

    tag

    How to make my container grow accordingly to its containers inside him?

    Jquery show/hide more data

    How to navigate from one field to another field using Enter Key function in MVC5

    How to debug CSS with Firebug for an element that only appears when clicked?

    jQuery - failed show/hide buttons

    Codeigniter--add “active” css class to link, how to?

    How to show text on image when hovering?

    How to get relative CSS from photoshop artboard?

    Speechbubble tooltip in CSS - how to move the arrow

    how to make edges round in CSS?

    how to CSS center a div, which is the child of a form element?

    How to set the box width same as the screen width?

    how to route to css/js files in mvc.net

    How to create a
      with a triangle for the :active row?

    How to apply an opacity without affecting a child element with html/css?

    how to use two css style in a div or span

    CSS, how to lign up 3 seperate containers side by side under a header in IE

    How to call single dropdown to every element using jquery

    How to align logo and text in bootstrap on small screens?