jquery dynamic change gradient bg

http://inspectelement.com/demos/jquerybg/

by ecartdk

HTML

<div id="container">          <h1>Changing the background with JQuery</h1>                  <div id="buttons">                          <ul id="icons">                                      <li class="three"><a href="#"></a></li>                     <li class="two"><a href="#"></a></li>                     <li class="one"><a href="#"></a></li>                                  </ul>                              <div id="bg">                              <p>Click on a colour to change the backgound.</p>                 <p><a href="http://inspectelement.com/tutorials/changing-the-background-color-of-a-page-using-jquery/">back to blog post</a></p>                          </div>                          </div>          </div> 


http://inspectelement.com/demos/jquerybg/images/bg.jpg

CSS

* { margin: 0; padding: 0; }                  /* -------------- classes for different background styles --------------- */              .bg1 { background: url(http://inspectelement.com/demos/jquerybg/images/red.jpg) repeat-x; background-color: #6c0000; }         .bg2 { background: url(http://inspectelement.com/demos/jquerybg/images/orange.jpg) repeat-x; background-color: #5A2A00; }         .bg3 { background: url(http://inspectelement.com/demos/jquerybg/images/blue.jpg) repeat-x; background-color: #00345B; }                  /* ---------------------------------------------------------------------- */                  .clear, .one, .two, .three { cursor: pointer; }                  #container { width: 800px; color: #fff; margin: 0 auto; font-family: Tahoma; }         #container h1 { text-align: center; text-indent: -9999px; background: url('http://inspectelement.com/demos/jquerybg/images/title.png') no-repeat; width: 400px; height: 34px; position: relative; top: 172px; left: 300px; z-index: 2; }                  #buttons { background: url('http://inspectelement.com/demos/jquerybg/images/bg.jpg') repeat-x; position: relative; margin-top: 105px; height: 300px; background-color: #cacaca; }                  ul#icons { position: relative; width: 228px; height: 96px; background: url('http://inspectelement.com/demos/jquerybg/images/buttons_sprite.jpg') no-repeat; }          #bg { background: url('http://inspectelement.com/demos/jquerybg/images/shadow.png') repeat-x; width: 800px; height: 239px; font-size: 16px; text-align: center; }         #bg p { position: relative; top: 110px; }         #bg p a { font-size: 10px; padding: 10px; position: absolute; top: 78px; text-decoration: none; color: #070809; }         #bg p a:hover { text-decoration: underline; }                  ul#icons li { position: absolute; list-style: none; }                  ul#icons li.three { width: 71px; height: 96px; }         ul#icons li.two { left: 71px; width: 97px; height: 96px; }         ul#icons...

JavaScript

$(document).ready(function(){               $("li.one").click( function(){ $                 ("body").removeClass('bg2 , bg3').addClass("bg1");              });              $("li.two").click( function(){ $                 ("body").removeClass("bg1 , bg3").addClass("bg2");              });              $("li.three").click( function(){ $                 ("body").removeClass("bg1 , bg2").addClass("bg3");              });                           });