change the entire page background when I click on a button

Question

so here is my question:

lets say I have a page with 3 buttons. each contains a unique pattern as as background. I want to change the entire page background image once I click/ hover on one of the buttons.

what I need is something similar to http://subtlepatterns.com/ I dont need a stop preview option, as long as the background image change again when I select a different button.

how can I do that?

also, if its not possible, this will also work for me: change the color of a DIV (instead of the entire page background) whenever I click/ hover on one of the buttons.

William de Castro · Accepted Answer · 2013-01-23T14:44:13.443

2

have 3 different body class in ur CSS sheet:

body.class1 {
background: ...;
}

body.class2 {
background: ...;
}

body.class3 {
background: ...;
}

use jQuery to dynamic change body class

$("#btn1").click(function() {
 $('body').removeClass();
 $('body').addClass('class1');
});

$("#btn2").click(function() {
 $('body').removeClass();
 $('body').addClass('class2');
});

$("#btn3").click(function() {
 $('body').removeClass();
 $('body').addClass('class3');
});

then finally put a id in each button to jQuery find this in DOM:

<a id="btn1">bg1</a>
<a id="btn2">bg2</a>
<a id="btn3">bg3</a>

edited Jan 23 '13 at 14:44

answered Jan 23 '13 at 14:31

William de Castro

86
1
9

many thanks! seems to be exactly what I need. I dont understand jQuery but I'll try to follow – devotchkah Jan 23 '13 at 14:42
I finally got the chance to test this, and thank you! exactly what I needed. – devotchkah Apr 19 '13 at 12:59

score 2 · Answer 2 · answered Jan 23 '13 at 14:35

Using just javascript you could do something like this

function changeBg(color) {
    var color = '#' + color;
    document.body.style.background = color;
}

http://jsfiddle.net/62SXu/

You can also change this to pass it the path to whatever your image is

score 1 · Answer 3 · answered Jan 23 '13 at 14:37

1

does have to be done with CSS? it seems alot easier method to do with jQuery. something like this would work:

<style>
.button1 {background:url(url to PIC);}
</style>
$(document).ready(function (){
$(".onClick").click(function (){
var ID = $(this).attr("id");
$(body).removeClass();
$(body).addClass(ID);
})
})
<div class = "onClick" id="button1"> ... </div>
<div class = "onClick" id="button2"> ... </div>
<div class = "onClick" id="button3"> ... </div>

answered Jan 23 '13 at 14:37

cody collicott

261
2
6

no, it doesnt need to be css only. I'm not familiar with jQuery but I will try to understat it now. thanks! – devotchkah Jan 23 '13 at 14:40

change the entire page background when I click on a button

3 Answers3

Linked