Geek asks and answers

DOMPDF background displaying the wrong size

I am trying to put together a small contact form for my 3 year old son who has leukemia. I want to use it so that people can send him promotion notes, and we can print them out and hang them in our room. I have a form that works and submits data using DOMpdf. My problem is that the background image that I am trying to use as “stationary” refuses to scale to 100% and no matter what size I make in my graphics software, it does not work. Any help is appreciated for what I am missing. The code is below. For example, see http://bebrave.me/#contact

<head>
<style>
  body { background-image: url(http://www.bebrave.me/test.jpg); background-position: top left; background-repeat: no-repeat;
  background-size: 100%;
  margin-top:300px;
  width:612px;
  height:792px;
  }
</style>

</head>

<body>

<table width="500px"  border="0" align="center" cellpadding="0" cellspacing="0" id="Table">
<tr>
<td align="left">Dear Joshua,<br />
<?php echo $post->Message; ?></td>
</tr>
<tr>
<td align="right">Be Brave!<br />
-<?php echo $post->Name; ?></td></tr>
</table>

</body>

+5
source share
2

, , dompdf 0.6.0 beta 3 github:

  • background-size dompdf
  • , ( ) .
  • dompdf 1.2cm
  • DPI dompdf 96. , , 72, PDF. - DPI dompdf .

dompdf, , . , , . , dompdf, .

, , , , . , github, , , . , , HTML.

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Denk+One' rel='stylesheet' type='text/css'>
<style>
  @page { margin: 0in; }
  body {
    font-family: Denk One, sans-serif;
    background-image: url(http://www.bebrave.me/test.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 300px 100px 10px 100px;
    width:100%;
    height:100%;
  }
  p {
    width: 400px;
    margin: auto;
  }
  .signature {
    margin-top: 4em;
    text-align: right;
  }
</style>

</head>

<body>

<p>
  Dear Joshua,<br />
  You may not understand all that happening. Sometimes, you may not even care.
  Maybe you just want to do what you have to do to get better so you can
  go back to being a three-year-old ... growing, learning, playing, loving.
  It may be hard to understand, but you are a hero to your family and friends. You
  are a hero to them because you show strength in the face of something so 
  scary. Stay strong, be happy, and and get better.
</p>

<p class="signature">
  Be Brave!<br />
  -BrianS
</p>

</body>
</html>
+6

96 (PPI).

:

A4: 96ppi and 210mm x 297mm or 297mm x 210mm ( )

+2

More articles:


All Articles