Background Switcher #2 | Angelica’s Site

This background switcher is the one I use on my site now. I really like it because it utilizes the entire page instead of a div, like in version #1. Here is an example:

First, you add this to your CSS stylesheet:

div.empty{
border: 0px;
width: 100%;
text-align:center;
}

div.changer{
width: 80%;
margin: 0 auto;
}

div.sample{
width: 70px;
height: 70px;
border-radius: 10px;
text-align:center;
background-size: contain !important;
float: left;
margin: 5px;
}

div.sample:hover, div.sample2:hover{
box-shadow: 0px 0px 20px LightGray;
}

div.sample2{
width: 70px;
height: 70px;
border-radius: 10px;
text-align:center;
background-size: contain !important;
margin: 0 auto;
}

.changer::after{
  clear:left !important;
}

div.empty{

border: 0px;

width: 100%;

text-align:center;

}

div.changer{

width: 80%;

margin: 0 auto;

}

div.sample{

width: 70px;

height: 70px;

border-radius: 10px;

text-align:center;

background-size: contain !important;

float: left;

margin: 5px;

}

div.sample:hover, div.sample2:hover{

box-shadow: 0px 0px 20px LightGray;

}

div.sample2{

width: 70px;

height: 70px;

border-radius: 10px;

text-align:center;

background-size: contain !important;

margin: 0 auto;

}

.changer::after{

clear:left !important;

}

Then, you add this JavaScript code to the head of your page:

function bgChange(bg) {
  document.body.style.background = bg;
}

function bgChange(bg) {

document.body.style.background = bg;

}

Finally, you use this HTML code to call on your different backgrounds:

<div class="changer">

<div onClick="bgChange(this.style.background)" class="sample" style="background:purple;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:pink;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:yellow;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:green;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:tomato;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:gainsboro;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:sandybrown;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:DarkTurquoise;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:Chartreuse;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:Magenta;"></div>

</div>

</div>

Some notes:

This code is set up for background colors right now; to add your background image file replace the style=”background:Color;” with style=”background: url(‘http://path.to/yourimage.png’);”
You can also change the behavior of the image from onClick to onMouseover which will make the background change automatically when you drag your mouse over the little thumbnail
I like this version better because you only alter the HTML code