Adding a Full-Width Footer Image to an Odoo online Quotation Template
Budget: €8 – €30 EUR
I want to add a footer image to my quotation template in Odoo. I was able to change the header without any problems, but I'm having issues with the CSS to ensure the footer image spans the full width without margins on the left and right. I am using Odoo online, so I do not have access to the CSS files. Below is the code for the footer template:
```html
<div style="width: 100%; height: 250px; background-image: url('https://alalmani.me/wp-content/uploads/2024/07/background.png'); background-size: cover; background-repeat: no-repeat; margin: 0; padding: 0;" t-attf-class="din_page footer o_company_#{company.id}_layout #{'din_page_pdf' if report_type == 'pdf' else ''}">
<div class="company_details" style="padding-top:0px">
<table style="width: 100%;">
<tr>
<td>
<ul class="list-inline text-nowrap" style="font-size:10px;">
<li t-if="company.company_details"><span t-field="company.company_details"/></li>
</ul>
</td>
<td>
<ul class="list-inline" style="font-size:10px;">
<li t-if="company.report_footer"><span t-field="company.report_footer"/></li>
</ul>
</td>
<td>
<ul style="font-size:11px;" class="list-inline">
<li t-if="company.vat"><t t-out="company.account_fiscal_country_id.vat_label or 'Tax ID'"/>:
<span t-if="forced_vat" t-out="forced_vat"/>
<span t-else="" t-field="company.vat"/>
</li>
<li>HRA Nr: <span>50183</span></li>
<li>Bank: <span>Postbank</span></li>
<li>IBAN: <span>DE63 4401 0046 0402 884464</span></li>
<li>BIC: <span>PBNKDEFF</span></li>
<li>IBAN: <span>DE63 4401 0046 0402 884464</span></li>
<li>BIC: <span>PBNKDEFF</span></li>
</ul>
</td>
<td t-if="company.partner_id.bank_ids">
<ul class="list-inline">
<t t-foreach="company.partner_id.bank_ids[:2]" t-as="bank">
<li>Bank: <span t-field="bank.bank_id.name"/>Postbank</li>
<li>IBAN: <span t-field="bank.acc_number"/>DE63 4401 0046 0402 884464</li>
<li>BIC: <span t-field="bank.bank_id.bic"/>PBNKDEFF</li>
</t>
</ul>
</td>
</tr>
</table>
</div>
</div>
```
The current output of the footer is like PDF 1,
but I want it to look like PDF 2.
```html
<div style="width: 100%; height: 250px; background-image: url('https://alalmani.me/wp-content/uploads/2024/07/background.png'); background-size: cover; background-repeat: no-repeat; margin: 0; padding: 0;" t-attf-class="din_page footer o_company_#{company.id}_layout #{'din_page_pdf' if report_type == 'pdf' else ''}">
<div class="company_details" style="padding-top:0px">
<table style="width: 100%;">
<tr>
<td>
<ul class="list-inline text-nowrap" style="font-size:10px;">
<li t-if="company.company_details"><span t-field="company.company_details"/></li>
</ul>
</td>
<td>
<ul class="list-inline" style="font-size:10px;">
<li t-if="company.report_footer"><span t-field="company.report_footer"/></li>
</ul>
</td>
<td>
<ul style="font-size:11px;" class="list-inline">
<li t-if="company.vat"><t t-out="company.account_fiscal_country_id.vat_label or 'Tax ID'"/>:
<span t-if="forced_vat" t-out="forced_vat"/>
<span t-else="" t-field="company.vat"/>
</li>
<li>HRA Nr: <span>50183</span></li>
<li>Bank: <span>Postbank</span></li>
<li>IBAN: <span>DE63 4401 0046 0402 884464</span></li>
<li>BIC: <span>PBNKDEFF</span></li>
<li>IBAN: <span>DE63 4401 0046 0402 884464</span></li>
<li>BIC: <span>PBNKDEFF</span></li>
</ul>
</td>
<td t-if="company.partner_id.bank_ids">
<ul class="list-inline">
<t t-foreach="company.partner_id.bank_ids[:2]" t-as="bank">
<li>Bank: <span t-field="bank.bank_id.name"/>Postbank</li>
<li>IBAN: <span t-field="bank.acc_number"/>DE63 4401 0046 0402 884464</li>
<li>BIC: <span t-field="bank.bank_id.bic"/>PBNKDEFF</li>
</t>
</ul>
</td>
</tr>
</table>
</div>
</div>
```
The current output of the footer is like PDF 1,
but I want it to look like PDF 2.