Переключатель фона на сайте

Простой в реализации но в тоже время эффективный переключатель фона (цвета, изображений) для сайта.

Переключатель фона для сайта реализован с помощью HTML и CSS. Также для работы необходимо подключить библиотеку jQuery.

Если есть вопросы, задавайте в комментариях.

HTML

<div id="background">
 <span>Кликните по иконке чтобы изменить фон сайта: </span>
 <ul>
 <li onclick="$('#background').css('background', '#37af49')" style="background:#37af49;"></li>
 <li onclick="$('#background').css('background', '#69d2e7')" style="background:#69d2e7;"></li>
 <li onclick="$('#background').css('background', '#fa6900')" style="background:#fa6900;"></li>
 <li onclick="$('#background').css('background', '#fe4365')" style="background:#fe4365;"></li>
 <li onclick="$('#background').css('background-image', 'url(http://upload.wikimedia.org/wikipedia/commons/9/90/Sunset_Marina.JPG)')" style="background:url(http://upload.wikimedia.org/wikipedia/commons/9/90/Sunset_Marina.JPG);"></li>
 </ul>
</div>

CSS

body{
 padding:0;
 margin:0;
 font-family:'Ubuntu';
 color:#ffffff;
}

#background{
 width:100%;
 height:100%;
 position:absolute;
 background:#37af49;
 transition:all 0.25s cubic-bezier(.71,.5,0,.98);
}

span{
 margin:0;
 padding:0;
 position:absolute;
 display:block;
 width:256px;
 height:64px;
 font-size:22px;
 left:64px;
 top:64px;
}

ul{
 position:absolute;
 padding:0;
 margin:0;
 left:64px;
 top:128px;
}

li{
 display:block;
 float:left;
 margin:0 16px 0 0;
 box-shadow:0 0 0 4px #ffffff;
 padding:0;
 width:32px;
 height:32px;
 cursor:pointer;
 transition:all 0.45s cubic-bezier(.71,.5,0,.98);
}

li:hover{
 box-shadow:0 0 0 2px #ffffff, inset 0 0 0 8px #ffffff;
 opacity:0.8;
}

JS

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>