django - Pisa html2pdf background-image not working -
im trying set background color in pdf generated pisa. have seen post related question , seek implement them, background display in part of pdf. code:
class="snippet-code-html lang-html prettyprint-override">{% load app_filters %} <html> <head> <meta charset="utf-8"> <title>ficha técnica</title> <style type="text/css"> @page { size: {{ pagesize|default:"a4" }}; margin-left: 2.5cm; margin-right: 2.5cm; margin-top: 2cm; margin-bottom: 2cm; background-image: url('{{ static_url }}pdf/fondo.png'); @frame header { -pdf-frame-content: page-header; margin-top: 0.7cm; margin-right: 2mm; margin-bottom: 0cm; margin-left: 1.2cm; } @frame footer { -pdf-frame-content: page-footer; bottom: 0cm; margin-left: 1cm; margin-right: 1cm; height: 1cm; } } @font-face { font-family: "light"; src: url('{{ static_url }}fonts/yanonekaffeesatz-light-webfont.ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: "bold"; src: url('{{ static_url }}fonts/yanonekaffeesatz-bold-webfont.ttf'); font-weight: normal; font-style: normal; } .logo{ margin-bottom: 50px; } .general img{ width: 400px; margin-bottom: 50px; } .titulo{ font-family: "bold"; font-size: 22px; text-transform: uppercase; color:#808080; margin-bottom: 15px; letter-spacing: "1"; } .general p{ font-family: "light"; font-size: 13px; color:#808080; } .line{ width:200pt; border-top: 2px solid #808080; color:white; font-size: 1px; } .bases { font-family: "bold"; font-size: 12px; color:#808080; } .bases table {-pdf-keep-in-frame-mode: shrink;} .bases img{ width:85px; } table{text-align: center;} </style> </head> <body> <div class="content"> <div class="logo"> <center><img src='{{ static_url }}pdf/logo_pdf.png'></center> </div> <div class="general"> <center><img src="{{media_url}}{{proto.image}}" alt=""></center> <h1 class='titulo'>{{proto.name|upper}}</h1> <p>{{proto.description}}</p> </div> <div class='line'>.</div> <div class="bases"> <h1 class='titulo'>bases seleccionadas</h1> <center> <table> <tr> {%for detalle in protodetalle%} <td> <center><img src="{{media_url}}{{detalle.base.especificimage}}" alt=""></center> <br> <h2>{{detalle.base.name|upper}}</h2> <h2>{{detalle.tela.name|upper}}</h2> <table> <tr> <td style='width:100px;'></td> <td><h2>{{detalle.color.name|split_by:"-"}}</h2></td> <td style='background-color:{{detalle.color.color}}; color:{{detalle.color.color}}; width:50px; font-size: 5px; border: 1px solid black;'>.</td> <td style='width:100px;'></td> </tr> </table> </td> {%endfor%} </tr> </table> </center> </div> </div> </body> </html>
the background image color square 36px 36px.
i tried set background-color body,html,div divs content take color. dont understand why background-image property sets in porcent of pdf displayed.
any thought mistake?
this current result:
i solved making background image same size of a4 page (297 x 210 mm). background cover pdf.
django pdf background-image background-color pisa
No comments:
Post a Comment