Some of HTML Tags are not reflecting when Generating PDF
Hi All,
I have requirement to add background image to a PDF as watermark.
For this im using below tag to add a background image (as Watermark) to a PDF attachment.
<img src="webwb/Draftbackground.png" style="width: 100%; height: 100%;position:absolute;opacity:0.3;z-index:1;" />
But when we generate the PDF ,This Background image is not populating.
( But i have removed this "position:absolute" ,it will add image to a PDF just as a image when generating).
Does any one have idea related to this?
Thanks,
Nuwan
Accepted Solution
Updated: 9 Jan 2024 4:08 EST
Bits In Glass Inc.
CA
Hi @NuwanD54 you can refer the below HTML Code to .
-For adding watermark try using Background Image and fix it using some CSS.
Hi @NuwanD54 you can refer the below HTML Code to .
-For adding watermark try using Background Image and fix it using some CSS.
<head>
<title>Watermark sample code</title>
<style>
body {
display: block;
position: relative;
height:100%;
width:100%;
}
body::after {
content: "";
background:url(https://www.google.co.in/images/srpr/logo11w.png) no-repeat;
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
height:100%;
width:100%;
}
</style>
<body>
<div class="container">
<br>
<div class="panel panel-primary">
<div class="panel-heading">
Example to add water mark to your PDF using HTML
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>
</div>
</div>
</div>
</div>
</body>
I used this approach it worked for me. Hope it works for you too.
Updated: 29 Aug 2022 8:05 EDT
Accenture
SG
Hi @NuwanD54,
If you have only issue with adding image as pdf water mark, please refer the below article, it might help you.
https://community.pega.com/support/support-articles/watermark-does-not-display-pdf
Thanks, Vinay
Evonsys
NL
Thanks for the reply. I have tried using java code mentioned in the article and when we use it, it generating the pdf content is generated wrongly ,plus watermark is not appear as well.
Thanks
Accepted Solution
Updated: 9 Jan 2024 4:08 EST
Bits In Glass Inc.
CA
Hi @NuwanD54 you can refer the below HTML Code to .
-For adding watermark try using Background Image and fix it using some CSS.
Hi @NuwanD54 you can refer the below HTML Code to .
-For adding watermark try using Background Image and fix it using some CSS.
<head>
<title>Watermark sample code</title>
<style>
body {
display: block;
position: relative;
height:100%;
width:100%;
}
body::after {
content: "";
background:url(https://www.google.co.in/images/srpr/logo11w.png) no-repeat;
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
height:100%;
width:100%;
}
</style>
<body>
<div class="container">
<br>
<div class="panel panel-primary">
<div class="panel-heading">
Example to add water mark to your PDF using HTML
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>
</div>
</div>
</div>
</div>
</body>
I used this approach it worked for me. Hope it works for you too.