xhtml2pdf Pisa css broken Unknown color False - django

I am trying to generate a PDF using html+css using xhtml2pdf.pisa using Django. However, I'm running into all sorts of weird issues with the CSS.
Below is my code:
def render_to_pdf(template_src, context_dict={}):
template = get_template(template_src)
html = template.render(context_dict)
result = BytesIO()
pdf = pisa.pisaDocument(BytesIO(html.encode("ISO-8859-1")), result)
if not pdf.err:
return HttpResponse(result.getvalue(), content_type='application/pdf')
return None
And my template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example 2</title>
<style>
#font-face {
font-family: SourceSansPro;
src: url(SourceSansPro-Regular.ttf);
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
a {
color: #0087C3;
text-decoration: none;
}
body {
position: relative;
width: 21cm;
height: 29.7cm;
margin: 0 auto;
color: #555555;
background: #FFFFFF;
font-family: Arial, sans-serif;
font-size: 14px;
font-family: SourceSansPro;
}
header {
padding: 10px 0;
margin-bottom: 20px;
border-bottom: 1px solid #AAAAAA;
}
#logo {
float: left;
margin-top: 8px;
}
#logo img {
height: 70px;
}
#company {
float: right;
text-align: right;
}
#details {
margin-bottom: 50px;
}
#client {
padding-left: 6px;
border-left: 6px solid #0087C3;
float: left;
}
#client .to {
color: #777777;
}
h2.name {
font-size: 1.4em;
font-weight: normal;
margin: 0;
}
#invoice {
float: right;
text-align: right;
}
#invoice h1 {
color: #0087C3;
font-size: 2.4em;
line-height: 1em;
font-weight: normal;
margin: 0 0 10px 0;
}
#invoice .date {
font-size: 1.1em;
color: #777777;
}
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}
table th,
table td {
padding: 20px;
background: #EEEEEE;
text-align: center;
border-bottom: 1px solid #FFFFFF;
}
table th {
white-space: nowrap;
font-weight: normal;
}
table td {
text-align: right;
}
table td h3{
color: #57B223;
font-size: 1.2em;
font-weight: normal;
margin: 0 0 0.2em 0;
}
table .no {
color: #FFFFFF;
font-size: 1.6em;
background: #57B223;
}
table .desc {
text-align: left;
}
table .unit {
background: #DDDDDD;
}
table .qty {
}
table .total {
background: #57B223;
color: #FFFFFF;
}
table td.unit,
table td.qty,
table td.total {
font-size: 1.2em;
}
table tbody tr:last-child td {
border: none;
}
table tfoot td {
padding: 10px 20px;
background: #FFFFFF;
border-bottom: none;
font-size: 1.2em;
white-space: nowrap;
border-top: 1px solid #AAAAAA;
}
table tfoot tr:first-child td {
border-top: none;
}
table tfoot tr:last-child td {
color: #57B223;
font-size: 1.4em;
border-top: 1px solid #57B223;
}
table tfoot tr td:first-child {
border: none;
}
#thanks{
font-size: 2em;
margin-bottom: 50px;
}
#notices{
padding-left: 6px;
border-left: 6px solid #0087C3;
}
#notices .notice {
font-size: 1.2em;
}
footer {
color: #777777;
width: 100%;
height: 30px;
position: absolute;
bottom: 0;
border-top: 1px solid #AAAAAA;
padding: 8px 0;
text-align: center;
}
</style>
</head>
<body>
<header class="clearfix">
<div id="logo">
<img src="logo.png">
</div>
<div id="company">
<h2 class="name">Company Name</h2>
<div>455 Foggy Heights, AZ 85004, US</div>
<div>(602) 519-0450</div>
<div>company#example.com</div>
</div>
</div>
</header>
<main>
<div id="details" class="clearfix">
<div id="client">
<div class="to">INVOICE TO:</div>
<h2 class="name">John Doe</h2>
<div class="address">796 Silver Harbour, TX 79273, US</div>
<div class="email">john#example.com</div>
</div>
<div id="invoice">
<h1>INVOICE 3-2-1</h1>
<div class="date">Date of Invoice: 01/06/2014</div>
<div class="date">Due Date: 30/06/2014</div>
</div>
</div>
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="no">#</th>
<th class="desc">DESCRIPTION</th>
<th class="unit">UNIT PRICE</th>
<th class="qty">QUANTITY</th>
<th class="total">TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no">01</td>
<td class="desc"><h3>Website Design</h3>Creating a recognizable design solution based on the company's existing visual identity</td>
<td class="unit">$40.00</td>
<td class="qty">30</td>
<td class="total">$1,200.00</td>
</tr>
<tr>
<td class="no">02</td>
<td class="desc"><h3>Website Development</h3>Developing a Content Management System-based Website</td>
<td class="unit">$40.00</td>
<td class="qty">80</td>
<td class="total">$3,200.00</td>
</tr>
<tr>
<td class="no">03</td>
<td class="desc"><h3>Search Engines Optimization</h3>Optimize the site for search engines (SEO)</td>
<td class="unit">$40.00</td>
<td class="qty">20</td>
<td class="total">$800.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td colspan="2">SUBTOTAL</td>
<td>$5,200.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">TAX 25%</td>
<td>$1,300.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">GRAND TOTAL</td>
<td>$6,500.00</td>
</tr>
</tfoot>
</table>
<div id="thanks">Thank you!</div>
<div id="notices">
<div>NOTICE:</div>
<div class="notice">A finance charge of 1.5% will be made on unpaid balances after 30 days.</div>
</div>
</main>
<footer>
Invoice was created on a computer and is valid without the signature and seal.
</footer>
</body>
</html>
My code is pretty basic and nothing special, they are just pretty much copied verbatim from the web
I cannot observe a pattern from these symptoms other than just thinking the css parser and layout engine is just totally incomplete and non-functional. However I cannot find anyone online who has the same issues as me. Am I crazy? I'm not sure what is happening here... any help would be appreciated.


I had the same issue I had this line:
.f1,input,textarea{border:1px solid #000;}
Which would cause the issue adding an extra 0 fixed it for me.
.f1,input,textarea{border:1px solid #0000;}
edit:
I also have this in my style
black{background-color:#000;}
.white{background-color:#fff;}
For some reason having the background color value have four characters will cause the error and having the solid less than four will cause the same error.

Related

Flexbox template for a draggable list

I have a list of draggable items, for a responsive design :
https://codepen.io/daedrias/pen/KyPZYG
header,
footer {
background-color: #5fba7d;
padding: 1rem;
}
.container {
display: flex;
min-height: 800px;
}
.menu {
width: 15em;
background-color: #FFF8DC;
}
.content {
background-color: #fff;
border-left: 1px solid #958C4D;
flex: 1;
padding: 5px 10px;
}
.sortable-list {
width: 18.75em;
}
.row {
display: flex;
margin-bottom: 15px;
box-sizing: border-box;
}
.row>* {
display: inline-block;
border-radius: 4px;
box-sizing: border-box;
}
.left {
height: 2em;
display: flex;
cursor: move;
}
.handle {
width: 1.5em;
height: 2em;
line-height: 2em;
text-align: center;
margin-right: 0.125em;
border-radius: 4px;
}
.icon {
width: 2em;
height: 2em;
border-radius: 4px;
background-color: #c97777;
margin: 0 0.125em;
}
.stretch {
flex: 1;
border: 1px solid black;
padding: 6px 12px;
margin: 0 0.1em;
}
.trash {
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin-left: 0.125em;
}
.bouton-ajout {
flex: 1;
border: 1px solid black;
border-radius: 4px;
padding: 6px 12px;
margin: 0 2.2em 0 1.75em;
}
/* mobile layout */
#media (max-width: 768px) {
.sortable-list {
width: 100%;
}
.menu {
display: none;
}
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>Header</header>
<div class="container">
<div class="menu">
</div>
<div class="content">
<p>asdasd</p>
<div class="sortable-list">
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
banana
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
pineapple
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
orange
</div>
<div class="trash">X</div>
</div>
<div class="bouton-ajout">
+ Add a row V
</div>
</div>
</div>
<div>
</body>
<html>
Everything is pretty much as I want it to be (as in : the positioning, not the colors of this example), but I'm not happy about the 'add' button.
I would like to know if there is a better way to handle the width of the 'Add' button,so it is the same size as the icon + label combined. For now I use margins.
Is the flex display a good solution in this case? Should I use something else like display : table?

how to get listed dates out of listed td tags in python using scrapy?

<div class="fullwidth singleCalender"><table border="0" cellpadding="4"
cellspacing="0">
<tbody>
<tr style="display: table-row;">
<th colspan="7" style="text-align: right; font-weight: normal; padding: 0px
8px;">Oct 2018</th>
</tr>
<tr style="display: table-row;">
<td>Mo</td><td>Tu</td><td>We</td><td>Th</td><td>Fr</td><td>Sa</td>
<td>Su</td>
</tr>
<tr style="display: none;">
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr style="display: table-row;">
<td>8</td>
<td>9</td>
<td>
<a title="Start of event" style="text-decoration:
none; background-color: rgb(144, 155, 31); color: rgb(255, 255, 255); font-
size: 14px; border-radius: 1px; padding: 0px 5px;">10</a>
</td>
<td>
<a title="Start of event" style="text-decoration: none; background-
color: rgb(144, 155, 31); color: rgb(255, 255, 255); font-size: 14px;
border-radius: 1px; padding: 0px 5px;">11</a>
</td>
<td>
<a title="Start of event"
style="text-decoration: none; background-color: rgb(144, 155, 31); color:
rgb(255, 255, 255); font-size: 14px; border-radius: 1px; padding: 0px
5px;">12</a>
</td>
<td><a title="Start of event" style="text-decoration: none;
background-color: rgb(144, 155, 31); color: rgb(255, 255, 255); font-size:
14px; border-radius: 1px; padding: 0px 5px;">13</a>
</td><td>14</td>
</tr>
<tr style="display: none;">
<td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
<td>21</td>
</tr>
<tr style="display: none;">
<td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td>
<td>28</td>
</tr>
<tr style="display: none;">
<td>29</td><td>30</td><td>31</td><td> </td><td> </td><td>
</td><td> </td>
</tr>
</tbody>
</table>
</div>
how to get 10, 11, 12, 13 values with title = "Start of event" of a tags in td's. from above code in python using scrapy? Can anyone help please? Thanx in advance..!I tried with this code "response.css('div.fullwidth table tbody tr:nth-child(4) td a.Start::text').extract()"
But i'm getting o/p like this "[]".

Try this:
response.xpath('//a[contains(#title, "Start of event")]/text()').extract()

Foundation email template - Gmail does not display any template style

I am sending an email with Codeigniter 3 configurations'm doing for the mailings in HTML format, here the configuration code.
Mail settings:
$config = Array (
'priority' => 1,
'protocol' => 'mail',
'smtp_host' => 'ssl://smtp.gmail.com',
'smtp_port' => 465,
'smtp_user' => 'email#gmail.com',
'smtp_pass' => 'password',
'mailtype' => 'html',
'charset' => 'utf-8', // iso-8859-1
'wordwrap' => TRUE,
'newline' => "\r\n"
);
Controller:
public function email()
{
$this->load->library('email');
$this->email->from('email#email.com', 'Names');
$this->email->to('email#email.com');
$this->email->subject('Email Test');
$data['nombre'] = 'Example';
$body = $this->load->view('email/test.php',$data,TRUE);
//$this->email->attach("/assets/images/logo.png", "inline");
$this->email->message($body);
if ($this->email->send()) {
return true;
} else {
return false;
}
$this->email->clear(TRUE);
}
View - Default email template Foundation:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width"/>
<style>
#outlook a {
padding: 0;
}
body {
width: 100%!important;
min-width: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
#backgroundTable {
margin: 0;
padding: 0;
width: 100%!important;
line-height: 100%!important;
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
float: left;
clear: both;
display: block;
}
center {
width: 100%;
min-width: 580px;
}
a img {
border: none;
}
p {
margin: 0 0 0 10px;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td {
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
border-collapse: collapse!important;
}
table, tr, td {
padding: 0;
vertical-align: top;
text-align: left;
}
hr {
color: #d9d9d9;
background-color: #d9d9d9;
height: 1px;
border: none;
}
table.body {
height: 100%;
width: 100%;
}
table.container {
width: 580px;
margin: 0 auto;
text-align: inherit;
}
table.row {
padding: 0px;
width: 100%;
position: relative;
}
table.container table.row {
display: block;
}
td.wrapper {
padding: 10px 20px 0px 0px;
position: relative;
}
table.columns, table.column {
margin: 0 auto;
}
table.columns td, table.column td {
padding: 0px 0px 10px;
}
table.columns td.sub-columns, table.column td.sub-columns, table.columns td.sub-column, table.column td.sub-column {
padding-right: 10px;
}
td.sub-column, td.sub-columns {
min-width: 0px;
}
table.row td.last, table.container td.last {
padding-right: 0px;
}
table.one {
width: 30px;
}
table.two {
width: 80px;
}
table.three {
width: 130px;
}
table.four {
width: 180px;
}
table.five {
width: 230px;
}
table.six {
width: 280px;
}
table.seven {
width: 330px;
}
table.eight {
width: 380px;
}
table.nine {
width: 430px;
}
table.ten {
width: 480px;
}
table.eleven {
width: 530px;
}
table.twelve {
width: 580px;
}
table.one center {
min-width: 30px;
}
table.two center {
min-width: 80px;
}
table.three center {
min-width: 130px;
}
table.four center {
min-width: 180px;
}
table.five center {
min-width: 230px;
}
table.six center {
min-width: 280px;
}
table.seven center {
min-width: 330px;
}
table.eight center {
min-width: 380px;
}
table.nine center {
min-width: 430px;
}
table.ten center {
min-width: 480px;
}
table.eleven center {
min-width: 530px;
}
table.twelve center {
min-width: 580px;
}
table.one .panel center {
min-width: 10px;
}
table.two .panel center {
min-width: 60px;
}
table.three .panel center {
min-width: 110px;
}
table.four .panel center {
min-width: 160px;
}
table.five .panel center {
min-width: 210px;
}
table.six .panel center {
min-width: 260px;
}
table.seven .panel center {
min-width: 310px;
}
table.eight .panel center {
min-width: 360px;
}
table.nine .panel center {
min-width: 410px;
}
table.ten .panel center {
min-width: 460px;
}
table.eleven .panel center {
min-width: 510px;
}
table.twelve .panel center {
min-width: 560px;
}
.body .columns td.one, .body .column td.one {
width: 8.333333%;
}
.body .columns td.two, .body .column td.two {
width: 16.666666%;
}
.body .columns td.three, .body .column td.three {
width: 25%;
}
.body .columns td.four, .body .column td.four {
width: 33.333333%;
}
.body .columns td.five, .body .column td.five {
width: 41.666666%;
}
.body .columns td.six, .body .column td.six {
width: 50%;
}
.body .columns td.seven, .body .column td.seven {
width: 58.333333%;
}
.body .columns td.eight, .body .column td.eight {
width: 66.666666%;
}
.body .columns td.nine, .body .column td.nine {
width: 75%;
}
.body .columns td.ten, .body .column td.ten {
width: 83.333333%;
}
.body .columns td.eleven, .body .column td.eleven {
width: 91.666666%;
}
.body .columns td.twelve, .body .column td.twelve {
width: 100%;
}
td.offset-by-one {
padding-left: 50px;
}
td.offset-by-two {
padding-left: 100px;
}
td.offset-by-three {
padding-left: 150px;
}
td.offset-by-four {
padding-left: 200px;
}
td.offset-by-five {
padding-left: 250px;
}
td.offset-by-six {
padding-left: 300px;
}
td.offset-by-seven {
padding-left: 350px;
}
td.offset-by-eight {
padding-left: 400px;
}
td.offset-by-nine {
padding-left: 450px;
}
td.offset-by-ten {
padding-left: 500px;
}
td.offset-by-eleven {
padding-left: 550px;
}
td.expander {
visibility: hidden;
width: 0px;
padding: 0!important;
}
table.columns .text-pad, table.column .text-pad {
padding-left: 10px;
padding-right: 10px;
}
table.columns .left-text-pad, table.columns .text-pad-left, table.column .left-text-pad, table.column .text-pad-left {
padding-left: 10px;
}
table.columns .right-text-pad, table.columns .text-pad-right, table.column .right-text-pad, table.column .text-pad-right {
padding-right: 10px;
}
.block-grid {
width: 100%;
max-width: 580px;
}
.block-grid td {
display: inline-block;
padding: 10px;
}
.two-up td {
width: 270px;
}
.three-up td {
width: 173px;
}
.four-up td {
width: 125px;
}
.five-up td {
width: 96px;
}
.six-up td {
width: 76px;
}
.seven-up td {
width: 62px;
}
.eight-up td {
width: 52px;
}
table.center, td.center {
text-align: center;
}
h1.center, h2.center, h3.center, h4.center, h5.center, h6.center {
text-align: center;
}
span.center {
display: block;
width: 100%;
text-align: center;
}
img.center {
margin: 0 auto;
float: none;
}
.show-for-small, .hide-for-desktop {
display: none;
}
body, table.body, h1, h2, h3, h4, h5, h6, p, td {
color: #222222;
font-family: "Helvetica", "Arial", sans-serif;
font-weight: normal;
padding: 0;
margin: 0;
text-align: left;
line-height: 1.3;
}
h1, h2, h3, h4, h5, h6 {
word-break: normal;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 32px;
}
h4 {
font-size: 28px;
}
h5 {
font-size: 24px;
}
h6 {
font-size: 20px;
}
body, table.body, p, td {
font-size: 14px;
line-height: 19px;
}
p.lead, p.lede, p.leed {
font-size: 18px;
line-height: 21px;
}
p {
margin-bottom: 10px;
}
small {
font-size: 10px;
}
a {
color: #2ba6cb;
text-decoration: none;
}
a:hover {
color: #2795b6!important;
}
a:active {
color: #2795b6!important;
}
a:visited {
color: #2ba6cb!important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: #2ba6cb;
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
color: #2ba6cb!important;
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
color: #2ba6cb!important;
}
.panel {
background: #f2f2f2;
border: 1px solid #d9d9d9;
padding: 10px!important;
}
.sub-grid table {
width: 100%;
}
.sub-grid td.sub-columns {
padding-bottom: 0;
}
table.button, table.tiny-button, table.small-button, table.medium-button, table.large-button {
width: 100%;
overflow: hidden;
}
table.button td, table.tiny-button td, table.small-button td, table.medium-button td, table.large-button td {
display: block;
width: auto!important;
text-align: center;
background: #2ba6cb;
border: 1px solid #2284a1;
color: #ffffff;
padding: 8px 0;
}
table.tiny-button td {
padding: 5px 0 4px;
}
table.small-button td {
padding: 8px 0 7px;
}
table.medium-button td {
padding: 12px 0 10px;
}
table.large-button td {
padding: 21px 0 18px;
}
table.button td a, table.tiny-button td a, table.small-button td a, table.medium-button td a, table.large-button td a {
font-weight: bold;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
font-size: 16px;
}
table.tiny-button td a {
font-size: 12px;
font-weight: normal;
}
table.small-button td a {
font-size: 16px;
}
table.medium-button td a {
font-size: 20px;
}
table.large-button td a {
font-size: 24px;
}
table.button:hover td, table.button:visited td, table.button:active td {
background: #2795b6!important;
}
table.button:hover td a, table.button:visited td a, table.button:active td a {
color: #fff!important;
}
table.button:hover td, table.tiny-button:hover td, table.small-button:hover td, table.medium-button:hover td, table.large-button:hover td {
background: #2795b6!important;
}
table.button:hover td a, table.button:active td a, table.button td a:visited, table.tiny-button:hover td a, table.tiny-button:active td a, table.tiny-button td a:visited, table.small-button:hover td a, table.small-button:active td a, table.small-button td a:visited, table.medium-button:hover td a, table.medium-button:active td a, table.medium-button td a:visited, table.large-button:hover td a, table.large-button:active td a, table.large-button td a:visited {
color: #ffffff!important;
}
table.secondary td {
background: #e9e9e9;
border-color: #d0d0d0;
color: #555;
}
table.secondary td a {
color: #555;
}
table.secondary:hover td {
background: #d0d0d0!important;
color: #555;
}
table.secondary:hover td a, table.secondary td a:visited, table.secondary:active td a {
color: #555!important;
}
table.success td {
background: #5da423;
border-color: #457a1a;
}
table.success:hover td {
background: #457a1a!important;
}
table.alert td {
background: #c60f13;
border-color: #970b0e;
}
table.alert:hover td {
background: #970b0e!important;
}
table.radius td {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
table.round td {
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}
body.outlook p {
display: inline!important;
}
#media only screen and (max-width: 600px) {
table[class="body"] img {
width: auto!important;
height: auto!important;
}
table[class="body"] center {
min-width: 0!important;
}
table[class="body"] .container {
width: 95%!important;
}
table[class="body"] .row {
width: 100%!important;
display: block!important;
}
table[class="body"] .wrapper {
display: block!important;
padding-right: 0!important;
}
table[class="body"] .columns, table[class="body"] .column {
table-layout: fixed!important;
float: none!important;
width: 100%!important;
padding-right: 0px!important;
padding-left: 0px!important;
display: block!important;
}
table[class="body"] .wrapper.first .columns, table[class="body"] .wrapper.first .column {
display: table!important;
}
table[class="body"] table.columns td, table[class="body"] table.column td {
width: 100%!important;
}
table[class="body"] .columns td.one, table[class="body"] .column td.one {
width: 8.333333%!important;
}
table[class="body"] .columns td.two, table[class="body"] .column td.two {
width: 16.666666%!important;
}
table[class="body"] .columns td.three, table[class="body"] .column td.three {
width: 25%!important;
}
table[class="body"] .columns td.four, table[class="body"] .column td.four {
width: 33.333333%!important;
}
table[class="body"] .columns td.five, table[class="body"] .column td.five {
width: 41.666666%!important;
}
table[class="body"] .columns td.six, table[class="body"] .column td.six {
width: 50%!important;
}
table[class="body"] .columns td.seven, table[class="body"] .column td.seven {
width: 58.333333%!important;
}
table[class="body"] .columns td.eight, table[class="body"] .column td.eight {
width: 66.666666%!important;
}
table[class="body"] .columns td.nine, table[class="body"] .column td.nine {
width: 75%!important;
}
table[class="body"] .columns td.ten, table[class="body"] .column td.ten {
width: 83.333333%!important;
}
table[class="body"] .columns td.eleven, table[class="body"] .column td.eleven {
width: 91.666666%!important;
}
table[class="body"] .columns td.twelve, table[class="body"] .column td.twelve {
width: 100%!important;
}
table[class="body"] td.offset-by-one, table[class="body"] td.offset-by-two, table[class="body"] td.offset-by-three, table[class="body"] td.offset-by-four, table[class="body"] td.offset-by-five, table[class="body"] td.offset-by-six, table[class="body"] td.offset-by-seven, table[class="body"] td.offset-by-eight, table[class="body"] td.offset-by-nine, table[class="body"] td.offset-by-ten, table[class="body"] td.offset-by-eleven {
padding-left: 0!important;
}
table[class="body"] table.columns td.expander {
width: 1px!important;
}
table[class="body"] .right-text-pad, table[class="body"] .text-pad-right {
padding-left: 10px!important;
}
table[class="body"] .left-text-pad, table[class="body"] .text-pad-left {
padding-right: 10px!important;
}
table[class="body"] .hide-for-small, table[class="body"] .show-for-desktop {
display: none!important;
}
table[class="body"] .show-for-small, table[class="body"] .hide-for-desktop {
display: inherit!important;
}
}
</style>
<style>
table.facebook td{background:#3b5998;border-color:#2d4473;}table.facebook:hover td{background:#2d4473!important;}table.twitter td{background:#00acee;border-color:#0087bb;}table.twitter:hover td{background:#0087bb!important;}table.google-plus td{background-color:#DB4A39;border-color:#CC0000;}table.google-plus:hover td{background:#CC0000!important;}.template-label{color:#ffffff;font-weight:bold;font-size:11px;}.callout .panel{background:#ECF8FF;border-color:#b9e5ff;}.header{background:#999999;}.footer .wrapper{background:#ebebeb;}.footer h5{padding-bottom:10px;}table.columns .text-pad{padding-left:10px;padding-right:10px;}table.columns .left-text-pad{padding-left:10px;}table.columns .right-text-pad{padding-right:10px;}#media only screen and (max-width: 600px) {table[class="body"] .right-text-pad{padding-left:10px!important;}table[class="body"] .left-text-pad{padding-right:10px!important;}}
</style>
<style>
table.facebook td{background:#3b5998;border-color:#2d4473;}table.facebook:hover td{background:#2d4473!important;}table.twitter td{background:#00acee;border-color:#0087bb;}table.twitter:hover td{background:#0087bb!important;}table.google-plus td{background-color:#DB4A39;border-color:#CC0000;}table.google-plus:hover td{background:#CC0000!important;}.template-label{color:#ffffff;font-weight:bold;font-size:11px;}.callout .panel{background:#ECF8FF;border-color:#b9e5ff;}.header{background:#999999;}.footer .wrapper{background:#ebebeb;}.footer h5{padding-bottom:10px;}table.columns .text-pad{padding-left:10px;padding-right:10px;}table.columns .left-text-pad{padding-left:10px;}table.columns .right-text-pad{padding-right:10px;}#media only screen and (max-width: 600px) {table[class="body"] .right-text-pad{padding-left:10px!important;}table[class="body"] .left-text-pad{padding-right:10px!important;}}
</style>
</head>
<body>
<script type="text/javascript">ANCHORFREE_VERSION="413161526"</script><script type='text/javascript'>(function(){if(typeof(_AF2$runned)!='undefined'&&_AF2$runned==true){return}_AF2$={'SN':'HSSHIELD00ZZ','IP':'85.237.197.240','CH':'HSSCNL100680','CT':'oxm,z234','HST':'&isUpdated=0','AFH':'hss439','RN':Math.floor(Math.random()*999),'TOP':(parent.location!=document.location||top.location!=document.location)?0:1,'AFVER':'5.2.1','FBW':'','FBWCNT':0};if(/^(.*,)?(11C)(,.*)?$/g.exec(_AF2$.CT)!=null){document.write("<scr"+"ipt src='http://box.anchorfree.net/insert/par.js?v="+ANCHORFREE_VERSION+"' type='text/javascript'></scr"+"ipt>")}document.write("<style type='text/css' title='AFc_css"+_AF2$.RN+"' >.AFc_body"+_AF2$.RN+"{} .AFc_all"+_AF2$.RN+",a.AFc_all"+_AF2$.RN+":hover,a.AFc_all"+_AF2$.RN+":visited{outline:none;background:transparent;border:none;margin:0;padding:0;top:0;left:0;text-decoration:none;overflow:hidden;display:block;z-index:666999;}</style>");})();</script>
<style type='text/css'>
.AFhss_dpnone{display:none;width:0;height:0}
</style>
<img src="about:blank"id="AFhss_trk"name="AFhss_trk"style="display:none"/>
<div id="AFhss_dfs"class="AFhss_dpnone">
<div id="AFhss_adrp0"class="AFhss_dpnone"></div>
<div id="AFhss_adrp1"class="AFhss_dpnone"></div>
<div id="AFhss_adrp2"class="AFhss_dpnone"></div>
<div id="AFhss_adrp3"class="AFhss_dpnone"></div>
<div id="AFhss_adrp4"class="AFhss_dpnone"></div>
<div id="AFhss_adrp5"class="AFhss_dpnone"></div>
<div id="AFhss_adrp6"class="AFhss_dpnone"></div>
<div id="AFhss_adrp7"class="AFhss_dpnone"></div>
<div id="AFhss_adrp8"class="AFhss_dpnone"></div>
<div id="AFhss_adrp9"class="AFhss_dpnone"></div>
</div>
<script type='text/javascript'>(function(){if(typeof(_AF2$runned)!='undefined'&&_AF2$runned==true){return}_AF2$={'SN':'HSSHIELD00ZZ','IP':'85.237.197.240','CH':'HSSCNL100680','CT':'oxm,z234','HST':'&isUpdated=0','AFH':'hss439','RN':Math.floor(Math.random()*999),'TOP':(parent.location!=document.location||top.location!=document.location)?0:1,'AFVER':'5.2.1','FBW':'','FBWCNT':0};if(_AF2$.TOP==1){document.write("<scr"+"ipt src='http://box.anchorfree.net/insert/41.js?v="+ANCHORFREE_VERSION+"' type='text/javascript'></scr"+"ipt>")}})()</script>
<table class="body">
<tr>
<td class="center" align="center" valign="top"><center>
<table class="row header">
<tr>
<td class="center" align="center"><center>
<table class="container">
<tr>
<td class="wrapper last"><table class="twelve columns">
<tr>
<td class="six sub-columns"><img src="http://placehold.it/200x50"></td>
<td class="six sub-columns last" align="right" style="text-align:right; vertical-align:middle;"><span class="template-label">HERO</span></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
</center></td>
</tr>
</table>
<br>
<table class="container">
<tr>
<td><table class="row">
<tr>
<td class="wrapper last"><table class="twelve columns">
<tr>
<td><h1>Hi, Elijah Baily</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<img width="580" height="300" src="http://placehold.it/580x300"></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
<table class="row callout">
<tr>
<td class="wrapper last"><table class="twelve columns">
<tr>
<td class="panel"><p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. Click it! »</p></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last"><table class="twelve columns">
<tr>
<td><h3>Title Ipsum <small>This is a note.</small></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last"><table class="three columns">
<tr>
<td><table class="button">
<tr>
<td>Click Me!</td>
</tr>
</table></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
<table class="row footer">
<tr>
<td class="wrapper"><table class="six columns">
<tr>
<td class="left-text-pad"><h5>Connect With Us:</h5>
<table class="tiny-button facebook">
<tr>
<td>Facebook</td>
</tr>
</table>
<br>
<table class="tiny-button twitter">
<tr>
<td>Twitter</td>
</tr>
</table>
<br>
<table class="tiny-button google-plus">
<tr>
<td>Google +</td>
</tr>
</table></td>
<td class="expander"></td>
</tr>
</table></td>
<td class="wrapper last"><table class="six columns">
<tr>
<td class="last right-text-pad"><h5>Contact Info:</h5>
<p>Phone: 408.341.0600</p>
<p>Email: hseldon#trantor.com</p></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last"><table class="twelve columns">
<tr>
<td align="center"><center>
<p style="text-align:center;">Terms | Privacy | Unsubscribe</p>
</center></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</center></td>
</tr>
</table>
</body>
</html>
The mail is displayed without style:
Would greatly appreciate your support, thank you very much.

After searching and reading many forums, I found the solution thanks to the community email Foundation among others, I explain here the details for those who can be useful.
Most companies like emails, Gmail, AOL, Hotmail etc ... They clean the tags <style> that they are located within the <head>, this is done to avoid conflicts of CSS, so the solution is to place all inline styles within each label correspodan, example:
<h1 style="font-size: 14px; font-weight: 500;">My title</h1>
Do this for a line is very easy, but when we want a sleek, well crafted template with a very high level of detail, it would be counterintuitive to do this once, for this there is a conversion technique called Emogrifier, which greatly facilitates work, which debmos do is design and layout our base template, with organized and separated styles, to have a well structured and organized page, but same not can send by email, so I mentioned, we have to Emogrifier the sketch prepared by pasting all the HTML and CSS code, and for this there are many tools, here I leave 3 highly recommended, but there are many.
Recommended pages:
http://foundation.zurb.com/emails/inliner.html
http://templates.mailchimp.com/resources/inline-css/
https://www.myintervals.com/emogrifier.php
The email template that you perform should look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 100%;
font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
line-height: 1.65;
}
img {
max-width: 100%;
margin: 0 auto;
display: block;
}
body, .body-wrap {
width: 100% !important;
height: 100%;
background: #efefef;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
}
a {
color: #71bc37;
text-decoration: none;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.button {
display: inline-block;
color: white;
background: #71bc37;
border: solid #71bc37;
border-width: 10px 20px 8px;
font-weight: bold;
border-radius: 4px;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
line-height: 1.25;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 16px;
}
p, ul, ol {
font-size: 16px;
font-weight: normal;
margin-bottom: 20px;
}
.container {
display: block !important;
clear: both !important;
margin: 0 auto !important;
max-width: 580px !important;
}
.container table {
width: 100% !important;
border-collapse: collapse;
}
.container .masthead {
padding: 80px 0;
background: #71bc37;
color: white;
}
.container .masthead h1 {
margin: 0 auto !important;
max-width: 90%;
text-transform: uppercase;
}
.container .content {
background: white;
padding: 30px 35px;
}
.container .content.footer {
background: none;
}
.container .content.footer p {
margin-bottom: 0;
color: #888;
text-align: center;
font-size: 14px;
}
.container .content.footer a {
color: #888;
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body>
<table class="body-wrap">
<tr>
<td class="container"><!-- Message start -->
<table>
<tr>
<td align="center" class="masthead"><h1>Something Big...</h1></td>
</tr>
<tr>
<td class="content"><h2>Hi Stranger,</h2>
<p>Kielbasa venison ball tip shankle. Boudin prosciutto landjaeger, pancetta jowl turkey tri-tip porchetta beef pork loin drumstick. Frankfurter short ribs kevin pig ribeye drumstick bacon kielbasa. Pork loin brisket biltong, pork belly filet mignon ribeye pig ground round porchetta turducken turkey. Pork belly beef ribs sausage ham hock, ham doner frankfurter pork chop tail meatball beef pig meatloaf short ribs shoulder. Filet mignon ham hock kielbasa beef ribs shank. Venison swine beef ribs sausage pastrami shoulder.</p>
<table>
<tr>
<td align="center"><p> Share the Awesomeness </p></td>
</tr>
</table>
<p>By the way, if you're wondering where you can find more of this fine meaty filler, visit Bacon Ipsum.</p>
<p><em>– Mr. Pen</em></p></td>
</tr>
</table></td>
</tr>
<tr>
<td class="container"><!-- Message start -->
<table>
<tr>
<td class="content footer" align="center"><p>Sent by Company Name, 1234 Yellow Brick Road, OZ, 99999</p>
<p>hello#company.com | Unsubscribe</p></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
When processing or make the Emogrifier, you should be as follows:
<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; height: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; background: #efefef; margin: 0; padding: 0;" bgcolor="#efefef">
<table class="body-wrap" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; height: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; background: #efefef; margin: 0; padding: 0;" bgcolor="#efefef"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="container" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; display: block !important; clear: both !important; max-width: 580px !important; margin: 0 auto; padding: 0;"><!-- Message start -->
<table style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; border-collapse: collapse; margin: 0; padding: 0;"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td align="center" class="masthead" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; color: white; background: #71bc37; margin: 0; padding: 80px 0;" bgcolor="#71bc37"><h1 style="font-size: 32px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.25; max-width: 90%; text-transform: uppercase; margin: 0 auto; padding: 0;">Something Big...</h1></td>
</tr><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="content" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; background: white; margin: 0; padding: 30px 35px;" bgcolor="white"><h2 style="font-size: 28px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.25; margin: 0 0 20px; padding: 0;">Hi Stranger,</h2>
<p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;">Kielbasa venison ball tip shankle. Boudin prosciutto landjaeger, pancetta jowl turkey tri-tip porchetta beef pork loin drumstick. Frankfurter short ribs kevin pig ribeye drumstick bacon kielbasa. Pork loin brisket biltong, pork belly filet mignon ribeye pig ground round porchetta turducken turkey. Pork belly beef ribs sausage ham hock, ham doner frankfurter pork chop tail meatball beef pig meatloaf short ribs shoulder. Filet mignon ham hock kielbasa beef ribs shank. Venison swine beef ribs sausage pastrami shoulder.</p>
<table style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; border-collapse: collapse; margin: 0; padding: 0;"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td align="center" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;"> Share the Awesomeness </p></td>
</tr></table><p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;">By the way, if you're wondering where you can find more of this fine meaty filler, visit Bacon Ipsum.</p>
<p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;"><em style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;">– Mr. Pen</em></p></td>
</tr></table></td>
</tr><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="container" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; display: block !important; clear: both !important; max-width: 580px !important; margin: 0 auto; padding: 0;"><!-- Message start -->
<table style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; border-collapse: collapse; margin: 0; padding: 0;"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="content footer" align="center" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; background: white none; margin: 0; padding: 30px 35px;" bgcolor="white"><p style="font-size: 14px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; color: #888; text-align: center; margin: 0; padding: 0;" align="center">Sent by Company Name, 1234 Yellow Brick Road, OZ, 99999</p>
<p style="font-size: 14px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; color: #888; text-align: center; margin: 0; padding: 0;" align="center">hello#company.com | Unsubscribe</p></td>
</tr></table></td>
</tr></table></body>
</html>
I recommend if they make many changes Emogrifier not save the template, to make them easier to apply changes and then make the process Emogrifier.
I hope you find it useful.
Thank you very much!

Pisa html2pdf background-image not working

Im trying to set a background color in pdf generated with pisa. I have seen this post related question and try to implement them, but the background only display in a part of the pdf. This is my code:
{% 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 is just a color square 36px by 36px.
I tried to set background-color to body,html,div but only divs with content take the color. so i dont understand why the background-image property only sets in a porcent of the pdf displayed.
Any idea what is my mistake?
this is the current result:

I solved making a background image with the same size of A4 page (297 x 210 mm). Now the background cover all the pdf.

It seems to be working with pdf background, which I would suggest.
Note that the (lightweight) documentation mentions only pdf background.
https://xhtml2pdf-base.googlecode.com/hg/doc/xhtml2pdf-en.html

Positioning a table for printing

Have a html-print I want to customize.
I need to print text in a certain position in the bottom of the page to fit a template (printed paper).
How can I position the last table exactly 2 inches from bottom? (the CartTable "belongs" to the application).
Right now the last table appears UNDER the CartTable.
Please help me!
<style>
body
{
background-color:White;
font-family: Helvetica,Arial,sans-serif;
}
.CartTable {
position:absolute;
vertical-align:top;
padding-top:5pt;
width:492pt;
border: 1px solid black;
font-size: 8pt;
font-family: Helvetica,Arial,sans-serif; } .CartTable2 {
position:absolute;
vertical-align:top;
padding-top:5pt;
width:492pt;
font-size: 8pt;
font-family: Helvetica,Arial,sans-serif; } .CartTdAmmount {
vertical-align:top;
text-align:right; } .BorderTopTable {
width:492pt;
border-top: 3px solid black;
font-size: 8pt;
font-family: Helvetica,Arial,sans-serif; } .BorderTable {
position:absolute;
vertical-align:top;
padding-top:5pt;
width:498pt;
border: 1px solid black;
font-size: 8pt;
font-family: Helvetica,Arial,sans-serif; } .HeaderTr {
position:absolute;
vertical-align:top;
padding-top:5pt;
border-bottom: solid 1px black;
background-color: #CCCCCC;
font-weight:bold;
font-size: 9pt;
font-family: Helvetica,Arial,sans-serif;
height:12pt; } </style> <table class=##CartTable##> <thead>##CartHeader## </thead> <tbody>##CartIncTax## </tbody> <tfoot>
<tr>
<td colspan=7>
<table style="WIDTH: 492pt; FONT-SIZE: 8pt; BORDER-TOP: black 1px solid">
<tbody>
<tr style="HEIGHT: 18pt">
<td></td>
</tr>
</tbody>
</table>
</td> </tr> </tfoot> </table>
<table> <tr>
<td > </td>
<td>Bankaccount info:</td> </tr> <tr>
<td> </td>
<td >##Bankaccount##</td> </tr>
</table>

Maybe something like a sticky footer would help ?