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!
Tweet
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/
Nothing dynamic here just a transparent grunge png and a custom color background for each user.
Tom’s technique is useful for one page site to get background change on link anchor. But for normal site a simple body ID make the same just with css
BTW, great site with clean design !
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?
You just need to change .click to .hover =]
Correct: change .click to .mouseover
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
nice ! thanks..
nice! fns!
it’s a kind of another jquery and imagination magic
this is really nice! this is what im looking for…im going to use this in my personal portfolio…but is there a way to make the transition to “ease in” just like this site: http://fuelbrandinc.com/#/about
please do tell me..thanks..^_^
I am looking to switch the background color or image via css and jQuery but on page reload. How might I go about doing this? – Thanks cb
Just a quick question, after the style is changd i want it to be selected all over site.. so to go about that it has to be stored in cookie i imagine.. how do u go about doin that..
cheers