September 30, 2021

How to Change Background Image in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to change background image in javascript. Images play a very important role in making your website more attractive to users. You must have seen a lot of websites where they use either some sort of background color or background image to match the theme of their website.

The background image can be added using CSS. But to change it dynamically, we have to make use of javascript. This is something which we are going to cover today. The background image is generally applied to the body element.

To set or change background image of any element, you can make use of the backgroundImage property. We are going to use this property to accomplish our goal.

In the following example, we have multiple images in the images directory. We also have 4 button elements. Upon click of each button, we will pick one image from the images directory and set it as our background image. Please have a look over the code example and the steps given below.

HTML & CSS

We have 2 elements in the HTML file (div and button). The div element is just a wrapper for the button elements.
The background.jpg is our default background image for the body element.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>
        <button id="btn-1">1</button>
        <button id="btn-2">2</button>
        <button id="btn-3">3</button>
        <button id="btn-4">4</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    background-image: url('images/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

div {
    display: flex;
    justify-content: center;
}

button {
    height: 50px;
    width: 50px;
    margin: 10px;
}

Javascript

We have selected all the button elements using the document.querySelector() method and stored them in the btn1, btn2, btn3, and btn4 variables respectively.
We have attached the click event listener to all the button elements.
In the click event handler function of each button element, we are using the backbgroundImage property of the body element to replace the background image with one of the images present in the images directory.
In the case of the 4th click event handler function, we are not picking an image from the images directory using relative URL rather we are using an absolute URL. The browser will load the image from that absolute URL and then set it as our background image.

let btn1 = document.querySelector('#btn-1');
let btn2 = document.querySelector('#btn-2');
let btn3 = document.querySelector('#btn-3');
let btn4 = document.querySelector('#btn-4');


btn1.addEventListener('click', () =>{
    document.body.style.backgroundImage = "url('images/1.jpg')";
});

btn2.addEventListener('click', () =>{
    document.body.style.backgroundImage = "url('images/2.jpg')";
});

btn3.addEventListener('click', () =>{
    document.body.style.backgroundImage = "url('images/3.jpg')";
});

btn4.addEventListener('click', () =>{
    document.body.style.backgroundImage = "url('https://i.imgur.com/mPKfD2J.jpg')";
});

You May Also Like: