JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="container">
    <div class="sixteen columns">
        <h1 class="remove-bottom" style="margin-top: 40px">Club 77</h1>
        <hr />
    </div>
    <div class="sixteen columns">
        <h3><a href="" id="fb">Facebook</a></h3>
    </div>
    <div class="sixteen columns">
        <h3><a href="">Photos</a></h3>
    </div>
    <div class="sixteen columns">
        <h3><a href="">Contact</a></h3>
    </div>

</div>

CSS

body {
    background-repeat: repeat;
}

JavaScript

$(document).ready(function() {
   
    //Preload
    $('<img/>').hide().attr('src', 'http://4.bp.blogspot.com/-3YtwFdb01YI/TnCNSc1c93I/AAAAAAAAA5c/V6g_3ghlw30/s1600/Background+13.jpg').load(function(){
        $('body').append($(this));
    });
    
    $('#fb').hover(function() {
        $('body').css('background-image', 'url("http://4.bp.blogspot.com/-3YtwFdb01YI/TnCNSc1c93I/AAAAAAAAA5c/V6g_3ghlw30/s1600/Background+13.jpg")');
    }, function() {
        $('body').css('background', '');
    });
});