Understanding the basics of html and javascript is essential before attempting this task.
To begin, you need to create an html structure similar to the following:
<div class="container" data-image="image1.jpg"></div>
<div class="container" data-image="image2.jpg"></div>
<div class="container" data-image="image3.jpg"></div>
<div class="container" data-image="image4.jpg"></div>
<div class="container" data-image="image5.jpg"></div>
A sample CSS code to style these containers:
.container {
width: 50px;
height: 50px;
border: 1px solid black;
background-color: blue;
}
The necessary javascript code:
var elements = document.getElementsByClassName("container"); // retrieve all elements
for(var i in elements) { // iterate through them
elements[i].click(function(e) { // handle click event
document.getElementsByTagName("body")[0].style.backgroundImage = this.dataset().image; // update background image
});
}