Last Updated: February 25, 2016
·
2.963K
· dsmith1024

Text with photo mosaic background CSS JS

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