Watermark text repeated diagonally css/html
I'm now using svg as a background image. Plain CSS:
body {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'><text transform='translate(20, 100) rotate(-45)' fill='rgb(245,45,45)' font-size='20'>watermark</text></svg>");
}
<body style="width:100%;height:100%"></body>
Javascript to set the background:
function watermark(text) {
var body = document.getElementsByTagName('body')[0];
var bg = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'>" +
"<text transform='translate(20, 100) rotate(-45)' fill='rgb(245,45,45)' font-size='20' >" + text + "</text></svg>\")";
body.style.backgroundImage = bg
}
//for this test
var input = document.getElementById('a');
watermark(input.value);
input.addEventListener('input', function(evt) {
watermark(this.value);
});
<body style="width:100%;height:100%">
<input id="a" value="change me" />
</body>
This is pretty similar to Daerik's answer, but I wanted to avoid using an extra element, and automate the watermark text generation.
document.querySelectorAll('.watermarked').forEach(function(el) {
el.dataset.watermark = (el.dataset.watermark + ' ').repeat(300);
});
.watermarked {
position: relative;
overflow: hidden;
}
.watermarked img {
width: 100%;
}
.watermarked::before {
position: absolute;
top: -75%;
left: -75%;
display: block;
width: 150%;
height: 150%;
transform: rotate(-45deg);
content: attr(data-watermark);
opacity: 0.7;
line-height: 3em;
letter-spacing: 2px;
color: #fff;
}
<div class="watermarked" data-watermark="howbloggerz">
<img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>