JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://lorempixel.com/400/200/city" alt="" width="0" height="0" />
<img src="http://lorempixel.com/400/200/people" alt="" width="0" height="0" />
<ul>
<li id="projectsm">Projects</li>
<li id="eventsm">Events</li>
</ul>

CSS

html,body{
    height:100%;,
}

body{
    background-image:url(http://lorempixel.com/400/200/animals);
    background-repeat:no-repeat;
    background-size:cover;
    -webkit-transition: background 1s ease-in-out;
    -moz-transition: background 1s ease-in-out;
    -ms-transition: background 1s ease-in-out;
    -o-transition: background 1s ease-in-out;
    transition: background 1s ease-in-out;
}

li{
    color:#fff;
    background:#000;
    padding:10px;
    display:inline-block;
    cursor:pointer;
}

li:hover{
    background:#f00;
}

JavaScript

$(function(){
    $('#projectsm').click(function(){
        $('body').css('background-image','url(http://lorempixel.com/400/200/city)')
    });
    $('#eventsm').click(function(){
        $('body').css('background-image','url(http://lorempixel.com/400/200/people)')
    });
});