I have a customized pdf report, but the header and footer are not working. 

<div class="header" style="background-image: url('/purchase_customizations/static/src/img/header.jpg'); ">
    <div class="row">
        <div class="col-6" style="padding-top:20px;padding-left:55px;">
            <t t-esc="docs.part_des"/>
        </div>
        <div class="col-6" style="padding-top:20px;padding-left:280px;">
            <t t-esc="docs.origin"/>
        </div>
    </div>
</div>

<div class="footer" style="background-image: url('/purchase_customizations/static/src/img/footer.jpg'); background-size: cover; background-repeat: no-repeat; height: 100px;">
    <div class="row">
        <div class="col-6" style="padding-top:40px;padding-left:55px;">
            <t t-if="docs.picking_type_code == 'incoming'">
                <t t-esc="docs.contract_id.name"/>
            </t>
            <t t-if="docs.picking_type_code == 'outgoing'">
                Incoming Inspection Report <t t-esc="docs.contract_id.name"/>
            </t>

        </div>
        <div class="col-6" style="padding-top:40px;padding-left:280px;">
            Page: <b><span class="page"/></b> of <b><span class="topage"/></b>
        </div>
    </div>
</div>