JavaScript Library For Creating Watermarks On Images – WatermarkIt

Category: Image , Javascript | March 3, 2016
Views Total:931 views
Official Page:Go to website
Last Update:March 3, 2016


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

The required CSS styles.

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

You Might Be Interested In:

Leave a Reply