I need to convert an html code to pdf using selectpdf web api which contains watermark image as background image. But the issues is it's not printing background images in pdf.

Is there any other way I can add watermark effect without using background-image. Please note, water mark needs to be repeated x & y to fill the page. Watermark is just an text turned 30dg. would prefere html/css first worst case can try javascript.

Thanks

3 Answers

0
Hybrid On

You could use absolute positioning.

body {
  margin: 0;
}

img {
  max-width: 100%;
}

.wrapper {
  position: relative;
}

.watermark {
  position: absolute;
  color: #fff;
  opacity: 0.6;
}
  .watermark.wm1 {
    top: 15px;
    left: 15px;
  }
  .watermark.wm2 {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .watermark.wm3 {
    bottom: 15px;
    right: 15px;
  }
  .watermark.wm4 {
    top: 15px;
    right: 15px;
  }
  .watermark.wm5 {
    bottom: 15px;
    left: 15px;
  }
<div class="wrapper">
  <img src="https://cdn.pixabay.com/photo/2017/10/25/16/54/african-lion-2888519_1280.jpg" />
  
  <div class="watermark wm1">WATERMARK!</div>
  <div class="watermark wm2">WATERMARK!</div>
  <div class="watermark wm3">WATERMARK!</div>
  <div class="watermark wm4">WATERMARK!</div>
  <div class="watermark wm5">WATERMARK!</div>
</div>

If that doesn't cut it for you, you can always use a js lib that merges watermarks with images to make them more secure. A great library is watermark.js

0
sarbudeen On

Try this

.watermark{
font-size:75px;
position: absolute;
margin: auto;
top:0px;
 transform:rotate(-45deg);
 color:#ccc;
 top:50%;
 transform-origin:bottom bottom;
 z-index:-999;
}
<html>
<head>
  <title>Watermark</title>
</head>
<body>
<span class='watermark'>WATERMARK</span>
<h1>Hello World</h1>
<p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World</p>
</body>
</html>

0
Community On

Check This..! May this Help you

.watermark{
font-size:75px;
position: absolute;
margin: auto;
top:0px;
 transform:rotate(-45deg);
 color:#ccc;
 top:50%;
 transform-origin:bottom bottom;
 z-index: 1000;
    color: #ccc4c4c7;
    margin-top: 60px;
}
img {
height: 500px;
}
<html>
<head>
  <title>Watermark</title>
</head>
<body>
<span class='watermark'>WATERMARK</span>
<img src="https://images3.alphacoders.com/853/thumb-1920-85305.jpg">
</body>
</html>