Background Switcher Alternative

An alternative to my background switcher <3

by Angelica

HTML

<h1 style="font-size: 24px;font-weight: bold;margin: 5px;text-align:center;">Angelica's Background Image Switcher (Alt.)</h1>
<p>modified from w3schools</p>

<hr>

<!-- The following is for the background switcher -->

<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>

CSS

body{
font-family: Verdana, sans-serif;
font-size: 14px;
line-height: 24px;
}


p{
text-align:center;
}

strong.highlight{
  color: Magenta;
  background: White;
  padding: 5px;
  border-radius: 10px;
}

hr{
  border: none;
  width: 95%;
  height: 10px;
  background: Aqua;
}

/* The following is for styling the background switcher */

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;
}

JavaScript

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