Why teams reach for watermark.js

The script ships without dependencies, making it easy to bolt a consistent watermark onto docs, dashboards, or staging previews.

Lightweight vanilla JavaScript (under 5 KB uncompressed).
URL parameters control placement, margins, width, and height.
Live configurator updates the code snippet and demos instantly.
Watermarks ignore pointer events so user interactions stay intact.
Optional href turns the watermark into a link. Only the image is clickable; everything around it stays click-through.
Optional background tint boosts readability on complex layouts.

Quick Start

Place a single <script> tag and configure the overlay directly in its URL. Paste your image below, tweak any of the fields, and click Update examples to refresh the demo and snippet.

Watermark image URL

Position

Margin

Background color

Background opacity (%)

Max width

Max height

Element id

Link (optional, makes the watermark clickable)

Link URL

Opens in

Rel

Title (tooltip)

Alt text

Only http(s), mailto: and relative links are used; anything else is ignored by the script.

Copied!

The script finds the parameters on its own, downloads the image, and anchors it to the chosen corner.

Parameters

Parameter	Type	Description
`url` (required)	URL	Relative or absolute URL to the watermark image (for example `watermark.png`). Encode absolute URLs with `encodeURIComponent` when embedding in the query string.
`position`	Compass code	Where to pin the watermark. Accepts `N`, `NE`, `E`, `SE`, `S`, `SW`, `W`, `NW`, or `C`/`CENTER`. Defaults to `SE`.
`max-width`	CSS size	Maximum width of the watermark image. Plain numbers are treated as pixels. Defaults to `240px`.
`max-height`	CSS size	Maximum height of the watermark image. Plain numbers are treated as pixels. Defaults to `240px`.
`margin`	CSS size	Offset from the edges used for the chosen position. Accepts any valid CSS length. Defaults to `16px`.
`background`	CSS color	Optional background fill behind the watermark image. Set to any CSS color (hex, rgb, hsl) to boost contrast. Defaults to `transparent`.
`id`	string	Optional custom element id. Useful when you want to render multiple watermarks on the same page.
`href`	URL	Makes the watermark a link. Only `http(s)`, `mailto:` and relative links are accepted. The image becomes clickable; the rest of the overlay stays click-through. Encode it with `encodeURIComponent`.
`target`	string	Where the link opens: `_blank` (default), `_self`, `_parent` or `_top`.
`title`	string	Tooltip and accessible name for the link.
`rel`	string	Link relationship. Defaults to `noopener noreferrer`.
`alt`	string	Alternative text for the image. Defaults to `Watermark`.

Live Examples

Each frame below loads the same watermark.js file with different parameters.

They default to the local watermark.png asset but will update whenever you change the URL above, so you can preview your own artwork offline.

Compass South-East

Bottom-right corner, tighter margin, constrained width.

Centered Overlay

Places the watermark in the middle of the viewport.

North-West Placement

Top-left corner with larger padding and height limit.

Clickable Link

Bottom-left, opens wasmer.io in a new tab when clicked.