html -Making an image the background image on mouse click?

Question

I don't have any code for this because I am fully stuck and unsure where to begin. The concept is simple enough - I want to be able to click an image (from several others on the page) and have it become the background image for the page.

I am aware I'll need JavaScript to do this, but I don't know where to start.

I was going to specify an array to select from in JavaScript, but then I wasn't sure how to specify that the input of the specific image being clicked would change the background image.

Answer 1

You can create click handlers for your img elements which will set the proper style attributes of document.body:

for (let img of document.querySelectorAll("img")) {
    img.addEventListener("click", function() {
        document.body.style.backgroundImage = `url('${this.src}')`;
        document.body.style.backgroundRepeat = "no-repeat";
        document.body.style.backgroundSize = "cover";
    })
}

<img src="https://th.bing.com/th/id/OIP.wwxK07x0Umfnh0l-nrjxjgHaDg?pid=ImgDet&rs=1">
<img src="https://www.forestis.it/media/1064/forestis-see-idm.jpg?mode=max&rnd=132197836980000000">