22

So, I have this Invoice page. and i am adding a watermark behind the page. i need to repeat the watermark for each page that would be printed.

The problem is that, I don't know how many pages would there be. there could be any number of pages.

I need to show watermark behind every page.

These images are taken from Google Chrome's print mode.

Page1 Page2 Page3

This is the page's html. you needn't go through it. the only point here is that there is a div that i know occurs two times. I used that in javascript to repeat the watermark.

<div class="content-box pad25A" style="page-break-after: always;">
    <div class="row" style="min-height:1000px">
        <div class="col-md-12">
            <div class="row">
                <div class="col-xs-3">
                    <div class="row">
                        <img src="/Images/ProjectImages/Project-Logo.jpg" style="width:100px;height:100px" class="img-circle" />

                    </div>
                </div>
                <div class="col-xs-5">
                    <center>
                        <div class="row">
                            <div class="col-xs-12">
                                <div style="font-size:14px;font-weight:bold;">TIGER INCENSE</div>
                            </div>
                            <div class="col-xs-12">
                                <center>
                                    <div style="font-size:14px;font-weight:bold;">TigerIncenseRAATradersCompany@gmail.com</div>
                                </center>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-12">
                                <address style="font-size:14px;font-weight:bold" class="invoice-address">Pakistan</address>
                            </div>
                        </div>
                    </center>
                </div>
                <div class="col-xs-4 float-right text-right">
                    <h4 class="invoice-title">Invoice</h4>No. <b>#52462</b>
                    <div class="divider"></div>
                    <div class="invoice-date mrg20B" style="font-weight:500">23 April 2018</div>
                </div>
            </div>
            <div class="divider"></div>
            <div class="row">
                <div class="col-xs-4">
                    <h2 class="invoice-client mrg10T">Client information:</h2>
                    <ul class="reset-ul">
                        <li><b style="font-weight:bold">Name:</b><span> Sir Fazal-e-Wahid</span></li>
                        <li><b>Address:</b><span> Peshawar</span></li>
                        <li><b>Phone:</b><span> 03319090057</span></li>
                    </ul>
                </div>
                <div class="col-xs-4">
                    <h2 class="invoice-client mrg10T">Order Info:</h2>
                    <ul class="reset-ul">
                        <li><b>Date:</b><span> 20 April 2018</span></li>
                        <li><b>Status:</b> <span class="bs-label label-warning">Delivered</span></li>

                    </ul>
                </div>
                <div class="col-xs-4">
                    <h2 class="invoice-client mrg10T">Order Details:</h2>
                    <p style="font-weight:600 !important;">Fragrance Sticks for use</p><br>
                </div>
            </div>
            <table class="table mrg20T table-bordered">
                <thead>
                    <tr>

                        <th>#</th>
                        <th>Product Name</th>
                        <th class="text-center">Per Piece</th>
                        <th>Price Per Piece</th>
                        <th>Price Per Carton</th>
                        <th>Carton Quantity</th>
                        <th>Total Price</th>
                    </tr>
                </thead>
                <tbody>

                    <tr>
                        <th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 08 Feb 2018</th>
                        <th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #7057</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>China Incense Stick for Mosquito</td>
                        <td class="text-center">48</td>
                        <td>Rs : 100</td>
                        <td>Rs : 4800</td>
                        <td>125</td>
                        <td>Rs : <span class="RowTotal">600000</span></td>
                    </tr>
                    <tr>
                        <th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 02 Mar 2018</th>
                        <th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #635</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>China Incense Stick </td>
                        <td class="text-center">240</td>
                        <td>Rs : 18</td>
                        <td>Rs : 4320</td>
                        <td>20</td>
                        <td>Rs : <span class="RowTotal">86400</span></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>China Incense Stick </td>
                        <td class="text-center">240</td>
                        <td>Rs : 18</td>
                        <td>Rs : 4320</td>
                        <td>28</td>
                        <td>Rs : <span class="RowTotal">120960</span></td>
                    </tr>
                    <tr>
                        <th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 26 Mar 2018</th>
                        <th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #292</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Crystal</td>
                        <td class="text-center">70</td>
                        <td>Rs : 48.57</td>
                        <td>Rs : 3399.9</td>
                        <td>34</td>
                        <td>Rs : <span class="RowTotal">115596.6</span></td>
                    </tr>
                    <tr>
                        <th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 31 Mar 2018</th>
                        <th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #658</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Crystal</td>
                        <td class="text-center">70</td>
                        <td>Rs : 48.57</td>
                        <td>Rs : 3399.9</td>
                        <td>34</td>
                        <td>Rs : <span class="RowTotal">115596.6</span></td>
                    </tr>
                    <tr>
                        <th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 18 Apr 2018</th>
                        <th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #1902</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Crystal</td>
                        <td class="text-center">70</td>
                        <td>Rs : 48.57</td>
                        <td>Rs : 3399.9</td>
                        <td>34</td>
                        <td>Rs : <span class="RowTotal">115596.6</span></td>
                    </tr>
                </tbody>

            </table>
            <center>
                <div style="font-size:14px;font-weight:bold">THANK YOU FOR YOUR BUSINESS</div>
            </center>
        </div>
        <br />
        <div class="row Signature">
            <div class="col-xs-5">

                <table class="table mrg20T table-bordered">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Per Piece</th>
                            <th>Carton</th>
                        </tr>
                    </thead>
                    <tbody>
                <tr>
                    <td>China Incense Stick </td>
                    <td>240 </td>
                    <td>48</td>
                </tr>
                <tr>
                    <td>China Incense Stick for Mosquito</td>
                    <td>48 </td>
                    <td>125</td>
                </tr>
                <tr>
                    <td>Crystal</td>
                    <td>70 </td>
                    <td>102</td>
                </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-xs-7">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="pull-right">
                            <span style="font-size:16px;font-weight:bold">
                                NET TOTAL.
                                <span class="TotalAmount">1154150</span>
                            </span>
                        </div>
                    </div>
                </div>
                <br />
                <div class="row">
                    <div class="col-xs-12">
                        <center>
                            <span style="font-size:16px;font-weight:bold">
                                <span class="TotalAmount">Eleven Lakh Fifty-Four Thousand One Hundred And Fifty Rupees Only</span>
                            </span>
                        </center>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <div class="row Signature">
        <div class="col-xs-4" style="padding:20px">
            <div class="row">
                <div class="col-xs-12">
                    <hr />
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <center>
                        <b>Reciever Signature</b>
                    </center>
                </div>
            </div>

        </div>

        <div class="col-xs-4" style="padding:20px">
            <div class="row">
                <div class="col-xs-12">
                    <hr />
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <center>
                        <b>GM. Signature</b>
                    </center>
                </div>
            </div>
        </div>
        <div class="col-xs-4" style="padding:20px">
            <div class="row">
                <div class="col-xs-12">
                    <hr />
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <center>
                        <b>Proprietor Signature</b>
                    </center>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="content-box pad25A" style="page-break-after: always;">
    <center>
        <p style="font-size:20px;font-weight:bold">About Our Company</p>
    </center>
    <div id="row">
        <div class="col-xs-12">
            <table class="table table-responsive">
                        <tr>
                            <td><p style="font-size:16px;font-weight:bold">1</p></td>
                            <td><p style="font-size:16px;">Tiger Incense fragrence is amazing and unique.</p></td>
                        </tr>
                        <tr>
                            <td><p style="font-size:16px;font-weight:bold">2</p></td>
                            <td><p style="font-size:16px;">Use itger insence for fragrence and keep your environment  redolence</p></td>
                        </tr>
                        <tr>
                            <td><p style="font-size:16px;font-weight:bold">3</p></td>
                            <td><p style="font-size:16px;">Meterial in tiger insence is very good and the fragrance is very amazing.</p></td>
                        </tr>
                        <tr>
                            <td><p style="font-size:16px;font-weight:bold">4</p></td>
                            <td><p style="font-size:16px;">If there are any complaints for tiger brand please email or contact us.</p></td>
                        </tr>

            </table>
        </div>
    </div>
</div>

The last page is hardcoded so i have added a watermark behind it by using javascript and repeating content through it.

This is how i am repeating the "Tiger incense" watermark for now

$(function () {
   $(".content-box").each(function () {
      $(this).after('<div class="watermark">TIGER INSENCE</div>');
   });
});

this is the watermark's css

.watermark {
    position: fixed;
    opacity: 0.2;
    /* Safari */
    -webkit-transform: rotate(-60deg);
    /* Firefox */
    -moz-transform: rotate(-60deg);
    /* IE */
    -ms-transform: rotate(-60deg);
    /* Opera */
    -o-transform: rotate(-60deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    position: absolute;
    font-size: 130px;
    margin-top: -700px;
    margin-left: -50px;
    white-space: nowrap;
 }

What i want is to repeat the watermark for each page there would be. using javascript or css or any javascript library that would help.Also Page size would always be A4.

zetawars
  • 1,023
  • 1
  • 12
  • 27
  • Any help appreciated :( – zetawars Apr 23 '18 at 05:39
  • Do you need this only when you print or always? – Rahi May 14 '18 at 12:24
  • Maybe you should generate a PDF, and use a setting to add a watermark to every page. There's probably a library out there which is able to do this. I can't help you any further, but I may have pointed you in the right direction. – Jeffrey Roosendaal May 14 '18 at 12:27
  • @Rahi Only When i Print. – zetawars May 14 '18 at 12:31
  • @JeffreyRoosendaal thankx for the help. Problem is client wants it to be saved from the browser. in pdf form. containing the watermark. Il look for a library. – zetawars May 14 '18 at 12:31
  • @zetawars I don't know if you can change what happens when someone presses ctrl+p (print), but you can create a download button yourself, which creates a pdf on the fly. – Jeffrey Roosendaal May 14 '18 at 12:33
  • Have you looked at existing SO questions and answers? For example this question (https://stackoverflow.com/questions/19837974/print-background-image-on-every-page-once) seems to be answering the same question as yours, though I haven't looked to see if the answer still works. – David Thomas May 14 '18 at 12:33
  • See also https://stackoverflow.com/a/8282112/4178262 - doesn't answer many aspects of this question, but is short and sweet. – Mark Stewart Jan 28 '22 at 15:52

3 Answers3

28

I would consider an overlay with a background that you repeat each 100vh. You can activate this style only on print using media query.

I used SVG for simplicity, you can easily replace with an image.

body {
  min-height: 300vh;
  position: relative;
  margin: 0;
}

body:before {
  content: "";
  position: absolute;
  z-index: 9999;
  inset: 0;
  background: 
    url('data:image/svg+xml;utf8,<svg style="transform:rotate(-45deg)" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 60"><text x="0" y="25" fill="%23000">Lorem </text></svg>') 
    0 0/100% 100vh;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • *Improve above code* add above CSS for only print media as below `@media print { … }` – Hardik Solanki May 21 '18 at 10:40
  • @hardiksolanki I didn't add it to be able to see the result on the snippet ;) – Temani Afif May 21 '18 at 10:42
  • @TemaniAfif , better code will be like below. '@media print { body { min-height: 300vh; position: relative; margin: 0; } body:before { content: ""; position: absolute; z-index: 9999; top: 0; bottom: 0; left: 0; right: 0; background: url('data:image/svg+xml,Lorem ') 0 0/100% 100vh; } } ' you just need to your code in print media CSS. rest of you code is perfect. :) – Hardik Solanki May 21 '18 at 10:48
  • 1
    @hardiksolanki I know we need media print and I already said it in my answer ... but if i Add it can we still see the result in the snippet? You will see nothing until someone take the code on his own and try to do a print in order to see it ... so I added the code without the print to be able to see how it looks and then we simply need to active this code on the print [which is trivial and obvious ] – Temani Afif May 21 '18 at 11:17
  • 2
    I was testing this on Chrome and the image wasn't showing up, but it will if you click more settings and then with options click the background options box then you're image will appear. To avoid having to do this you can add: -webkit-print-color-adjust: exact !important; to force chrome to show the background image. – Aaron Angle Jan 21 '21 at 22:01
6

take watermark as background image

<style type="text/css" media="print">
    .content-box
    {
        background-image:url('watermarkimage.png');
        background-repeat:repeat-y;
        background-position: center;
        background-attachment:fixed;
        background-size:100%;
    }
</style>
vinaykumar0459
  • 497
  • 1
  • 6
  • 19
0

My solution without background-image svg:

body {
    position: relative;
}

body:before {
    content: 'Draft';
    position: fixed;
    inset: 0;
    font-size: 180px;
    font-weight: bold;
    display: grid;
    justify-content: center;
    align-content: center;
    opacity: 0.1;
    transform: rotate(-45deg);
}
Sephyre
  • 326
  • 2
  • 13