Roke
Reputation: 369
Dompf corporative paper as background
I am using Dompdf to create pdf invoice and is working great but i need to put a background image filled the paper (A4). I have a header, content and footer sections and if i put the background image in the body is not working.
My html is:
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Factura XXXX, S.A. con fecha 2017-06-30</title>
<style>
.invoice-header{
max-width:800px;
padding:10px;
font-size:12px;
line-height:15px;
font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color:#555;
}
.invoice-header table {
border-collapse: collapse;
}
.invoice-header table tr td table tr td {
border:1px solid black;
}
.invoice-header table td{
padding:2px;
vertical-align:top;
}
.invoice-header table tr.heading td{
background:#eee;
font-weight:bold;
}
.invoice-footer{
max-width:800px;
margin:10px 10px 10px 10px;
padding:10px;
font-size:12px;
line-height:15px;
font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color:#555;
}
.invoice-footer table {
border-collapse: collapse;
width: 100%
}
.invoice-footer table tr td table tr td {
border:1px solid black;
}
.invoice-footer table td{
padding:2px;
vertical-align:top;
}
.invoice-footer table tr.heading td{
background:#eee;
font-weight:bold;
}
.invoice-box{
max-width:800px;
height: 509.921259845px;
max-height: 509.921259845px;
border:1px solid black;
margin:10px 6px 10px 6px;
padding:10px;
font-size:12px;
line-height:15px;
font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color:#555;
}
.invoice-box table{
width:100%;
text-align:left;
}
.invoice-box table td{
padding:2px;
vertical-align:top;
}
.invoice-box table tr.top table td{
padding-bottom:10px;
}
.invoice-box table tr.top table td.title{
font-size:45px;
line-height:45px;
color:#333;
}
.invoice-box table tr.information table td{
padding-bottom:10px;
line-height:20px;
}
.invoice-box table tr.heading td{
background:#eee;
font-weight:bold;
}
.invoice-box table tr.details td{
padding-bottom:10px;
}
.invoice-box table tr.item td{
}
.invoice-box table tr.item.last td{
border-bottom:none;
}
.invoice-box table tr.total td{
font-weight:bold;
}
@media only screen and (max-width: 600px) {
.invoice-box table tr.top table td{
width:100%;
display:block;
text-align:center;
}
.invoice-box table tr.information table td{
width:100%;
display:block;
text-align:center;
}
}
.page-number:before {
content: counter(page);
}
.body{
counter-reset: page 0;
}
#header { position: fixed;
top: -250px;
}
#footer { position: fixed;
bottom: 160px;
width: 100%;
text-align: center;
font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
font-size:8px;
}
#content {
position: fixed;
top: -80px;
}
@page {
margin: 432.283464565px 10px 57.79527559px 10px;
}
</style>
</head>
<body>
<div id='header'>
<div class='invoice-header'>
<table border=0 cellpadding='0' cellspacing='0' style='width:100%;'>
<tr>
<td width='50%'>
<table cellpadding='5' style='white-space: nowrap; text-align:center;'>
<tr class='heading'>
<td style='padding: 5px;'>Numero Factura</td>
<td style='padding: 5px;'>Fecha Factura</td>
</tr>
<tr>
<td style='padding: 5px;'>12313/2017</td>
<td style='padding: 5px;'>30/06/2017</td>
</tr>
</table>
</td>
<td width='50%'>
<table border=1 cellpadding='5' style='width:100%;'>
<tr>
<td style='line-height: 150%;'>
<div align='right'>123</div>
XXXXXXX, S.A.<br>
ADDRESS <br>
28042, MADRID<br>
Madrid<br>
CIF/NIF: 123123123
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<!-- Fin Cabecera -->
<!-- Inicio pie pagina -->
<div id='footer'>
<div class='invoice-footer'>
<table border=0 >
<tr>
<td style='width:25%'>
<table border=1 style='width:100%'>
<tr class='heading' style='text-align: center'><td>Forma de Pago<br>
CONFIRMING 60 DIAS F.F.</td></tr>
<tr class='heading' style='text-align: center'><td>Vencimiento</td></tr><tr style='text-align: center'><td>29/08/2017 - 148,04 €</td></tr>
</table>
</td>
<td style='width:40%'>
<table border=1 style='width:100%'>
<tr class='heading' style='text-align: center'>
<td colspan='5' style='height:16px'></td>
</tr>
<tr class='heading'>
<td>Iban</td>
<td>Entidad</td>
<td>Sucursal</td>
<td>D.C</td>
<td>Nº Cuenta</td>
</tr>
<tr>
<td style='text-align: center; height:16px'></td>
<td style='text-align: center; height:16px'></td>
<td style='text-align: center; height:16px'></td>
<td style='text-align: center; height:16px'></td>
<td style='text-align: center; height:16px'></td>
</tr>
</table>
</td>
<td style='width:35%'>
<!-- RESUMEN FACTURA -->
<table border=1 style='width:100%'>
<tr class='heading' style='text-align: center' nowrap><td colspan='2'>Resumen Factura</td></tr>
<tr><td style='text-align: left' nowrap>Base Imponible I.V.A 21% </td><td style='text-align: right' nowrap> 122,35 €</td></tr><tr><td style='text-align: left' nowrap>Importe I.V.A. 21% </td><td style='text-align: right' nowrap>25,69 €</td></tr><tr><td style='text-align: left' nowrap>Total </td><td style='text-align: right' nowrap>148,04 €</td></tr></table>
<!-- FIN RESUMEN FACTURA -->
</td>
</tr>
</table>
</div>
</div>
<!-- Fin pie pagina -->
<div id='content'>
<div class='invoice-box'>
<table border=0 cellpadding='0' cellspacing='0'>
<tr class='heading'>
<td colspan='2' style='text-align:left; padding-left:200px'>
Descripcion de los Servicios
</td>
<td style='text-align:right; padding-right:25px'>
Cantidad
</td>
<td style='text-align:right; padding-right:25px'>
Precio
</td>
<td style='text-align:right;'>
Total
</td>
</tr><tr>
<td colspan='2' style='text-align:left: padding-left:5px'>POR LOS SERVICIOS PRESTADOS DE LIMPIEZA DURANTE EL MES JUNIO
</td>
<td style='text-align:right;padding-right:25px'>1,00</td>
<td style='text-align:right;padding-right:25px'>122,35 €</td>
<td style='text-align:right'>122,35 €</td>
</tr>
</table>
<!-- FIN Detalle del informe -->
</div>
</div>
</body>
</html>
I tryed to configure a div section with a background but dont work:
#fondocorporativo{
position:fixed
background-image: url(data:image;base64,".$fila_empresa['foliocorporativo'].");
}
I tryed to configure the background image in the body too. But didnt work too.
How to configure for example this image:
As background of the full invoice, it doesnt matters if is do it with css or with dompdf canvas function. I tryed both and cant configure.
Thank you.
Upvotes: 0
Views: 72
Answers (1)
Roke
Reputation: 369
Finally i get the answer. I create a div container that have a img element with the image i want to make it the background like this:
<div id='foliocorporativo'>
<img height='100%' width='100%' src='data:image/png;base64,".$fila_empresa['foliocorporativo']."'>
</div>
Then i created the css style for the div container:
#foliocorporativo{
position: absolute;
top:-430px
left:-1000px
z-index:-1;
}
In my case the image is 1100px height and 780px of width.
EDIT: You must write the div inside the header div otherwise you will get the background only in the 1st page.
Upvotes: 1
Related Questions
- Dompdf not generating pdf properly
- Dompdf 0.6.2 - pull or push element to bottom page
- How to get background image showing on DOMPDF generator
- How to give Background to pdf by dompdf?
- Dompdf: Can i import pdf as background
- Making paper-aligned html to be used with WKHTMLTOPDF
- Background image position dompdf css2
- DOMPDF page break
- How I can break my document correctly with DOMPDF?
- DOMPDF Page background (or alternatives?)