1

I'm generating paged pdf document out from html using Openhtmltopdf. My issue is, that I need to place image on the edge of the page, outside of @page margin. Under all circumstances, playing with visibility, padding/margin, negative margin of child element etc., content outside of @page margin is always hidden under the margin.

I'm able to reproduce the issue in Openhtmltopdf sandbox, placing this snippet:

<html>
<head>
<style>

@page{
            margin: 5cm;
            border: solid;
}
</style>
</head>
<body>

<div style="font-size: 90px; position: absolute; top: 0cm; left: -1cm;">
  Hello World!
</div>

</body>
</html>

into sandbox on https://sandbox.openhtmltopdf.com/ produces following result:

Result

As you guess, my issue is that 'Hello world' is not visible outside inner @page content section. Any way how to break that rule, and make whole text visible will probably solve my issue as well. I have carefully formatted existing letters, so I would be happy to keep current page margin definition, without need of reformation of rest of the content. In the end, I only need to place image over the pdf. Thank you in advance for any help!

Václav
  • 365
  • 2
  • 15

1 Answers1

0

If you just want to add an image you can set it as a background-image of the page.

<html>
<head>
<style>

@page{
    margin: 5cm;
    border: solid;
    background-image: url(image:flyingsaucer.png);
    background-position: 3cm 3cm;
    background-repeat: no-repeat;
}
div{
    font-size: 90px; 
    position: absolute; 
    top: 0cm; 
    left: -1cm;
}
</style>
</head>
<body>
<div>
  Hello World!
</div>

</body>
</html>
obourgain
  • 8,856
  • 6
  • 42
  • 57