JavaScript Library For Creating Watermarks On Images – WatermarkIt

WatermarkIt is a vanilla JavaScript library that allows you to apply an image watermark to your images.

How to use it:

Load the watermarkit.js library in the document when needed.

<script src="js/watermarkit.js"></script>

Add a CSS class ‘watermarkme’ to your image.

<img src="image.jpg" class="watermarkme">

Apply a custom image watermark to the image.

var watermarkIt = new WatermarkIt({
    // image selector
    imageToWatermark: "watermarkme", 
    // path to watermark image
    watermarkPath: "./images/watermark.png", 
    // bottom padding in pixels
    paddingBottom: 0, 
    // size of watermark
    watermarkSize: 20
});
watermarkIt.mark();

The required CSS styles.

.watermarkit-container {
  position: relative;
  display: inline-block;
}
.watermarkit {
  position: absolute;
  z-index: 1;
 width;
 100%;
  height: 100%;
  visibility: hidden;
}
.watermarkit img {
  width: 100%;
  height: 100%;
  z-index: 2;
  margin-left: 0px;
  margin-bottom: 0px;
}