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
I want the same thing as Sam. I also thought about cookies, because my site is static. Please help. Nice and simple tutorial by the way. Thanks for sharing it.
This works great thanks! I would also be interested in how to keep this persistent across pages. I am using this for some static HTML page comps so that would be ideal but I am guessing you would probably need php for cookies?
A note for any one who might experiment with the code…
removeClass takes space-separated class names … I uses comma-separated class names…
Then spent time trying to find why my code was not working correctly…
Is it possible to include a fading transition with this technique? Maybe using CSS3 Transitions? I haven’t been able to work it out.
nice changing background color with jquery…
excellent, thank you very much
THS!!!! <3
$(function(){
var colors = ["#fff","#000"];
var rand = Math.floor(Math.random()*colors.length);
$(‘#bg’).css(“background-color”, colors[rand]);
});
the simple way:)
css: u should have a #bg div 100% width & height on z-index 0
this works
thanks for sharing
how to changed the background color using the j query and changed the background color when the click on button…
plz tell me and get a example of the above question….
gr8 job….:)
Hey nice sharing, this will help me for my clients who wants to have different background color with a single click.
I was also looking for a script which will continuously change the background color, it would look like Rainbow.
But always with no success, finally found a script which continuous changes the background color
http://webstutorial.com/jquery-color-changing-background-jquery-continous-color-change-jquery-rainbow/jquery
Thanks mate for your share
Great this is what I have been looking for.
Nooby to jQuery here – ready to put the hammer thru the monitor… I’m sure you’ve all been there.
The setup – 15 buttons (with good working button image change rollover) on page and 1 div with pic in it.
Need – any button click changes background image in div.
The result – 4 days… throat cutting very close now.
Does anyone know how to make this stuff work?