Menu
How can I achieve the following watermark text ("howbloggerz") with css/html?
272
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>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>Set the size of your container and float your text using absolute positioning while transforming your text with rotate.
#watermark {
height: 450px;
width: 600px;
position: relative;
overflow: hidden;
}
#watermark img {
max-width: 100%;
}
#watermark p {
position: absolute;
top: 0;
left: 0;
color: #fff;
font-size: 18px;
pointer-events: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
}<div id="watermark">
<img src="http://www.topchinatravel.com/pic/city/dalian/attraction/people-square-1.jpg">
<p>This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark.</p>
</div>Note: For repeating text, I would suggest using either JavaScript or jQuery.
18
If it is only to lay a text over the image, here is another possible css option with drop-shadow and a pseudo (text-shadow works too)
.watermarked:after {/* draw the watermark at screen*/
color: rgba(0, 0, 0, 0.4);
content: 'watermarked watermarked watermarked';
word-spacing: 3em;
transform: rotate(-60deg);
filter:
drop-shadow(2em 3em #000)
drop-shadow(4em 6em #000)
drop-shadow(8em 12em #000)
drop-shadow(-15em -24em #000)
;
}
/* makeup */
.watermarked {
width: max-content;
border: solid;
display: grid;
overflow: hidden;
}
img,
.watermarked:after {
grid-row: 1;
grid-column: 1;
margin: auto;
}<div class="watermarked" data-watermark="howbloggerz">
<img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
