How to scale absolute div and children with spritesheet images aka tile map

I have a png spritesheet file containing images of size 32x32.

I have this css to extract the images and place on dom:

.viewport {
  position: relative;
  height: 72px;
  width: 100px;
  background: white;
  border: solid black;
}

.tile {
    background-image: url("http://ift.tt/1oHREIC"); 
    position: absolute;
    width: 50px;
    height: 72px;
}

.image1 {
  background-position: 250px 0px;
}

.image2 {
  background-position: 0px 0px;
}

<img src="http://ift.tt/1oHREIC" />

<div class='viewport'>  
  <div class='tile image2' style='left:50px;'></div>
  <div class='tile image1'></div>
</div>

Now I need to scale this viewport to fill the entire page. To enable fullscren.

Example: http://ift.tt/1VzfZAw