JSFiddle - React, Tailwind, and code Playground

by Diabl0570

HTML

<div id="hidden_bg">
      <img id="dummy" src="http://www.floorshop.nl/filelib/s2/cache/avatar/50_50_crop/78165068854825177972463921101227496670361383-black-and-white-graphite_1.jpg" />
</div>
<div id="board">
    <div id="background_hack">
 
    </div>
   </div>

<div id="imgs">
<img src="http://www.floorshop.nl/filelib/s2/cache/avatar/50_50_crop/78165068854825177972463921101227496670361383-black-and-white-graphite_1.jpg" />
    <img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
    <img src="http://www.xerox.nl/kantoor/assets/images/xog/pages/smb/tips/red_square.jpg" />
    <img src="http://www.xerox.nl/kantoor/assets/images/xog/pages/smb/tips/gray_square.jpg" />
    <img src="http://www.gsm4all.nl/images/logos/orange.gif" />
    <img src="http://www.floorshop.nl/filelib/s2/cache/avatar/50_50_crop/78165068854825177972463921101227496670361383-black-and-white-graphite_1.jpg" />
</div>

CSS

html, body
{
    height: 100%;
}
#hidden_bg
{
    position:absolute;
    overflow:hidden;
    left:-500px;
}
div#background_hack,div#background_hack img
{
    padding:0px;
    margin:0px;
    line-height:1px;
}
#board
{
      position:fixed;
    width:50%;
    height:80%;
    border:solid;
    overflow:hidden;
}

#imgs
{
    position:fixed;
    left:70%;
    width:25%;
    height:80%;
    border:solid;
}

JavaScript

$(function(){
   repeat_bg();    
    $("#imgs img").click(function(){
        var src = $(this).attr('src');
        $("div#hidden_bg img#dummy").attr("src",src);
        repeat_bg();            
    });
});

function repeat_bg()
{
    var board_width = $('#board').width();
    var board_height = $('#board').height();
    var bg_width = $('#dummy').width();
    var bg_height = $('#dummy').height();
    
    
    var count_horizontal = board_width / bg_width;
    count_horizontal= Math.ceil(count_horizontal);
    
    var count_vertical = board_height / bg_height;
    count_vertical= Math.ceil(count_vertical);
    $('div#background_hack').html("");
    $('div#background_hack').css('width' ,board_width+bg_width);

    /*
    * repeat
    * alert("horizontal we need: "+count_horizontal + " images to fill up");
    * alert("vertical we need: "+count_vertical + " images to fill up");
    * alert("totaal needed images = "+count_horizontal + " * "+ count_vertical + "= "+count_horizontal * count_vertical);
    */
    
    for (var i=0;i<count_horizontal * count_vertical;i++)
    { 
       var clone = $('#dummy').clone();
        $('div#background_hack').append(clone);
    }    
}