Why does my Odoo 9 custom Qweb report with CSS is not working?

Question

I'm creating a new report on Odoo 9 which uses css styles in order to position text over a background image. The image is in background and occupies the full A4 page without any margins.

In html, it's working fine. However, when I print the report to PDF, I have blank margins at left and right, and the text goes below the background image. It seems that the CSS rules are not applied. Do you find any solution for making it working in PDF?

Here is my report:

<template id="sub_proposal">
<style type="text/css">
    .container {
        padding: 0mm;
    }
    #sponsor-ref {
        position: absolute;
        top: 84mm;
        left: 45mm;
    }
    #form_image {
        position: absolute;
        top: 0mm;
        left: 0mm;
        width: 210mm;
        height: 297mm;
    }
    #form_image img {
        max-width: 100%;
        max-height: 100%;
        margin: auto;
    }
</style>
<t t-call="report.html_container">
    <t t-foreach="docs" t-as="o">
        <div class="page">
            <div id="form_image">
                <span t-field="o.sub_proposal_form" t-field-options='{"widget": "image"}'/>
            </div>
            <span id="sponsor-ref" t-field="o.ref"/>
        </div>
    </t>
</t>

Camillecamilo

Answer 1

The style tag and contents must be set within the <div class="page"> element.

^{_{I don't have any documentation, only from experience.}}

^{_{Link to same question on Odoo forum}}

Vertical

Answer 2

This will print image with text on pdf

<template id="account_report_id" inherit_id="account.report_invoice_document">
    <p t-if="o.fiscal_position_id.note" position="after"><br/><br/>
        <img t-if="o.partner_id.image" t-att-src="'data:image/png;base64,%s' % o.partner_id.image" style="float:right;max-height:40px;"/><br/><br/>
        <span style="float: right;">Customer Sign</span>
    </p>
 </template>

Ye