CodePen

HTML

            
              <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg' class='rand'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-04-a-thumb.jpg' class='rand'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg' class='rand'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg' class='rand'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-10-a-thumb.jpg' class='rand'>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              html, body { height: 100%; background: black; }
.rand {
  position: absolute;
  width: 48px;
  height: 48px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var imgs = document.querySelectorAll('.rand'), 
    len = imgs.length, 
    /* subtract the width/ height of images */
    w = document.body.clientWidth - 48, 
    h = document.body.clientHeight - 48;

for(var i = 0; i < len; i++) {
  imgs[i].style.top = Math.floor(Math.random() * h) + 'px';
  imgs[i].style.left = Math.floor(Math.random() * w) + 'px';
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................