I wanted to develop something that would allow the user to change the background of my site but without having to load a separate stylesheet so thats where jQuery comes in. As you will see below, jQuery allows you to manipulate html elements through the use of classes defined in CSS and it’s easier than you think.

Take a peak of the working demo.
The HTML and CSS
Before we get underway, we need to include the jQuery library.
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
Then we create a simple unordered list of links, each with a unique class.
<ul>
<li class="one"><a href="#"></a></li>
<li class="two"><a href="#"></a></li>
<li class="three"><a href="#"></a></li>
</ul>
Next we create three classes in the CSS. These are the styles used for the background which will be applied via jQuery.
.bg1 { background: url(images/red.jpg) repeat-x; background-color: #6c0000; }
.bg2 { background: url(images/orange.jpg) repeat-x; background-color: #5A2A00; }
.bg3 { background: url(images/blue.jpg) repeat-x; background-color: #00345B; }
The jQuery Magic
What you see below is basically jQuery functions that add or remove classes to the body element based on what list item the user clicks on. As you can anyone who has experience of CSS will be immediately familiar with the processes below. The classes setup in CSS are being applied to the body tag of the site, changing the background image and colour.
$(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");
});
});
As you can see it’s fairly easy to understand jQuery at this basic level. To perform the same task without a javascript framework would require weeks and weeks of learning. Make sure you find out more about jQuery and have fun!



nice job and very handy code.
Great tip, thanks for sharing!
Thanks for the tip, i’m looking some like this[1].
Is posible with jquery ??
Anyone Knows ??
[1] http://darkville.com.mx/radio/index.php?option=com_content&view=article&id=46&Itemid=54
Thanks again
the problem if reload, colour back again default (white), how make random background colour like
http://www.tweetcc.com/
Awesome. I wanted to change background color of my web page from blue to white for pdf generation (html to pdf), and was running out of ideas until I found this blog. Since I was already using jquery, implementing the tips above was simple.
Thanks a lot.
U rock!!!
Worked a charm! cheers!
How to change it to switch the background onmouseover?
Hi,
excellent post thanks!
i am trying to make a toggle button which will change my background color between grey and white. how complicated can that be? i couldnt really modify your code successfully to make that.. any tips?
thanks