Div image background is hidden by child table on print - html

Question

I made an invoice which is composed of a table inside a div.
The div has a background image.
On regular screen view, the background for the invoice is working well.
See screen view:
See screen view
However on print preview, the div background is hidden by the table.
See print view
How can I make the print preview like what I see on the screen? I don't want the table to hide the div background image.
HTML:
<div class="invoices">
<div ng-repeat="table in invoicesTables">
<div class="header row"><br>
<div style="margin-bottom: 20px;" class="col-xs-12">
<img src="src/print_statement.PNG" alt="">
</div>
<div class="col-xs-4">
<h5>Customer: <strong style="font-size: 12pt">{{client.Name}}</strong></h5>
</div>
<div class="col-xs-4">
<h5 class="invoiceNumber">Invoice No.: <strong style="font-size: 13pt; color:red">{{table.invoiceNumber}}</strong></h5>
</div>
<div class="col-xs-3">
<h5>
<span>Date: </span><strong style="font-size: 12pt;">{{today | date: fullDate}}</strong>
<!-- <span style="float:left">From: </span><strong style="font-size: 12pt; float:right;">{{table.startDate | date: fullDate}}</strong>
</br></br>
<span style="float:left">Till: </span><strong style="font-size: 12pt; float:right;">{{table.endDate | date: fullDate}}</strong> -->
</h5>
</div>
</div>
<div class="invoicebg">
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Delivery No.</th>
<th colspan="2">Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in table.tableInvoices | orderBy : '-Date' | reverse ">
<td>{{i.Date | date: fullDate}}</td>
<td>{{i.Id}}</td>
<td colspan="2">{{i.Name}}</td>
<td>{{i.Amount | number : 2}}$</td>
</tr>
</tbody>
</table>
<div ng-style="emptySpaces[$index]"></div>
<div style="font-weight:bold" class="tfoot row">
<div class="col-xs-3" style="border-top:2px solid black;">
أو ما بعادله بالليرة اللبنانية
</div>
<div class="col-xs-7" style="border-top:2px solid black; background-color:lightgray;">
{{table.totalInLetters}} Dollars <span style="float:right;">فقط</span>
</div>
<div class="col-xs-2" style="border:2px solid black;">
{{table.total | number: 2}}$
</div>
</div>
</div>
</div>
CSS:
.invoicebg{
-webkit-print-color-adjust: exact;
background: url('../src/invoicewatermark.png');
background-repeat: no-repeat;
background-size:contain;
background-position:center ;
}
Thank you

Answer 1

Try this, put in your css background:none !important to your table, if doesn't work also try put that property to tr and td too and tell us how did it go

Answer 2

Try adding this in CSS file:
.table {
background-color:rgba(0, 0, 0, 0);
}