Header and Footer image issue in backgund

[soumyajit-sundew]

I am trying to render my html with backgrunds in header and footer but unfortunately when header footer contains any backgruond image using css its not working ..
any help would be appreciated.

Note: when the header i embeed in the body it works properly but when i am adding it using its own option called header html it doesnt work.

follwing is my html

`

<title>Liberty Home Guard</title> <style type="text/css"> @media print { thead { display: table-header-group; }

        tfoot {
            display: table-footer-group;
        }

        tr {
            page-break-inside: avoid;
        }

        @page {
            size: A4;
        }

        .page-break {
            display: block;
            page-break-after: always;
        }
    }

    tr,
    td,
    tbody,
    table {
        vertical-align: top;
    }

    div {
        box-sizing: border-box;
    }

    div.header {
        display: block;
        text-align: center;
        position: running(header);
    }

    div.footer {
        display: block;
        text-align: center;
        position: running(footer);
    }

    @page {
        @top-center {
            content: element(header)
        }
    }

    @page {
        @bottom-center {
            content: element(footer)
        }
    }
</style>

</div> <div style="margin:0; padding: 0; box-sizing: border-box; width:70%; float:right;"> <p style="margin:0; padding: 0; font-family:Arial, sans-serif, 'Open Sans'; color:#fff; text-align: right; font-size:24px; line-height:1; font-weight:600;"> Ticket Number: TN:4001321</p> <p style="margin:0; padding: 0; font-family:Arial, sans-serif, 'Open Sans'; color:#fff; text-align: right; font-size: 20px; margin-top: 19px;"> AC Maintenance</p> </div> </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </center> `