JSFiddle - React, Tailwind, and code Playground
HTML
<nav>
<a id="first">Link 1</a>
<a id="second">Link 1</a>
<a id="third">Link 1</a>
</nav>
CSS
body {
background-image:url("http://www.thatsreallypossible.com/wp-content/uploads/2012/12/Space-Colonialisation.jpg");
background-size:cover;
}
nav {
position:fixed;
background:black;
color:white;
opacity:0.9;
padding:20px;
font-family:arial;
}
nav a {
display:block
}
JavaScript
$("#first").click(function () {
$("body").css("background-image", 'url("http://static.bbc.co.uk/solarsystem/img/ic/640/collections/space_exploration/space_exploration_large.jpg")');
});
$("#second").click(function () {
$("body").css("background-image", 'url("http://i.telegraph.co.uk/multimedia/archive/02179/Milky-Way_2179177b.jpg")');
});
$("#third").click(function () {
$("body").css("background-image", 'url("http://www.thatsreallypossible.com/wp-content/uploads/2012/12/Space-Colonialisation.jpg")');
});