Solución:
Esto es bastante similar a la respuesta de Daerik, pero quería evitar el uso de un elemento adicional y automatizar la generación de texto de marca de agua.
Array.from(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>Establezca el tamaño de su contenedor y haga flotar su texto usando un posicionamiento absoluto mientras transforma su texto con rotar.
#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>Nota: Para repetir texto, sugeriría usar JavaScript o jQuery.
Ahora estoy usando svg como imagen de fondo. CSS simple:
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 para configurar el fondo:
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>¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)