Estava brincando com a colocação de fotos do usuário no fundo de algum texto grande.
Utilizando a cor de texto transparente CSS3 e o clipe de fundo, é possível fazer um mosaico de imagens dentro do texto.
Confira a cópia de trabalho completa aqui: JSBin
HTML, CSS e JS básicos. JS provavelmente poderia ser um pouco limpo.
<html>
<body >
<div id="numbers">
1,024
</div>
</body>
</html>
#numbers {
font: bold 180px Impact, Sans-Serif;
top: 10px;
position: absolute;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
background-size: 20px;
background-position: 0 0;
background-repeat: no-repeat;
}
$(function(){
var $num = $("#numbers");
var maxWidth = $num.width() + 20;
var size = 20;
var xpos = 0;
var ypos = 0;
var time = 0;
var backImage = $num.css("background-image");
var backSize = $num.css("background-size");
var backRepeat = $num.css("background-repeat");
var backPosition = $num.css("background-position");
for (i=0; i<295; i++) {
var img = getRandomObj(images);
backImage += ', url(' + img.src + ')';
backSize += ', ' + String(size) + 'px ' + String(size) + 'px';
backPosition += ', ' + String(xpos) + 'px ' + String(ypos) +'px';
xpos = xpos + size;
if(xpos > maxWidth) {
if(time===0){
xpos = 10;
time = 1;
}else{
xpos = 0;
time = 0;
}
ypos = ypos + size;
}
backRepeat += ', norepeat';
}
$num.css("background-image", backImage);
$num.css("background-size", backSize);
$num.css("background-position", backPosition);
$num.css("background-repeat", backRepeat);
});