Text with photo mosaic background CSS JS

#css

#js

#css3

#mosaic

Was playing around with putting user pictures in the background of some large text.

user image

Utilizing CSS3 transparent text color and background clip it is possible to make a mosaic of images inside text.

Check out full working copy here: JSBin

Basic HTML, CSS, and JS. JS could probably be cleaned up a bit.

<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);
});