JSFiddle - React, Tailwind, and code Playground

by Mahmud Ahmad

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="jumbotron">THIS IS JUMBOTRON</div>
<div class="bg-holder" id="bg-1" background-attachment: scroll; background-size: 1903px; ">HELLO</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}
.jumbotron {
    background-image: url();
}
.bg-holder {
    height: 50px;
    width:50px;
    background-size: cover;
    background-image: url(http://1-ps.googleusercontent.com/xk/HJB7Y9xE-t-vEV2aS_jH234XvR/www.dailydawdle.com/images.dailydawdle.com/french-juggler-lindzee-poi-stunning-optical-illusion.jpg.pagespeed.ce.LgSbPio_47LLNzSVbw19.jpg);
}
.bg-holder:hover {
    border: red dashed 4px;
    cursor: hand;
    cursor: pointer;
}
.section {
    padding: 60px 10px;
}

JavaScript

$(document).ready(function () {

    $("#bg-1").click(function () {
        var bgURL = $(this).css('background-image');
        var bg = $(this).css('background-image');
        bg = bg.replace('url(', '').replace(')', '');
        alert(bg);
        
    $(".jumbotron").css('background-image', bgURL);
    });
});