JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<div id="wallpaper" class="wallpaper_back1"></div>
<select onchange="changeBackground();" id="select_category">
<option value="back1">Background 1</option>
<option value="back2">Background 2</option>
<option value="back3">Background 3</option>
</select>
<script>
function changeBackground() {
$('#wallpaper').removeClass();
$("#wallpaper").addClass("wallpaper_" + $("#select_category").val()).css('opacity','0').animate({opacity:'1'});
};
</script>
CSS
#select_category {
float: right;
}
#wallpaper {
width: 263px;
height: 165px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-position: top center;
background-repeat: no-repeat;
}
.wallpaper_back1 {
background-image: url('http://s3.amazonaws.com/crowi_images/original/85/schokolade.jpg');
}
.wallpaper_back2 {
background-image: url('http://s3.amazonaws.com/crowi_images/original/107/whisky.jpg');
}
.wallpaper_back3 {
background-image: url('http://s3.amazonaws.com/crowi_images/original/70/cholesterin.jpg');
}