Watermark
Overlays a repeating, non-interactive watermark of tiled text or image over slotted content.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
text | string | — | Watermark text (tiled) |
image | string | — | Image URL tiled instead of text |
opacity | string | 0.08 | Overlay opacity |
rotate | string | -22 | Tile rotation in degrees |
gap | string | 120 | Pixel spacing between tiles |
font-size | string | 16 | Text size in px |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/watermark.js"></script>import "./pura/lib/watermark.js";