How To Change Background Image In Javascript

How to Alter Background Image in Javascript

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

The groundwork image can be added using CSS. Just to change information technology dynamically, we have to make use of javascript. This is something which we are going to cover today. The background paradigm is generally practical to the body chemical element.

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

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

HTML & CSS

We take two elements in the HTML file (div and button). The div element is just a wrapper for the push elements.
The groundwork.jpg is our default background epitome for the body element.
We accept washed some basic styling using CSS and added the link to our style.css stylesheet within the caput element.
We take also included our javascript file script.js with a script tag at the lesser.

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-viii">     <meta name="viewport" content="width=device-width, initial-scale=ane.0">     <meta http-equiv="X-UA-Uniform" content="ie=edge">     <link rel="stylesheet" href="mode.css">     <title>Certificate</title> </head> <body>          <div>         <push id="btn-1">1</button>         <push button id="btn-2">ii</button>         <button id="btn-3">3</button>         <push id="btn-iv">four</button>     </div>     <script src="script.js"></script> </torso> </html>

torso {     background-image: url('images/groundwork.jpg');     background-repeat: no-echo;     background-size: cover; }  div {     display: flex;     justify-content: heart; }  button {     height: 50px;     width: 50px;     margin: 10px; }

Javascript

Ezoic

We have selected all the push 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 result handler function of each push button chemical element, we are using the backbgroundImage property of the body element to supercede the background image with one of the images present in the images directory.
In the case of the 4th click upshot handler function, we are not picking an image from the images directory using relative URL rather we are using an absolute URL. The browser volition load the image from that absolute URL and then set it as our background image.

let btn1 = document.querySelector('#btn-one'); let btn2 = document.querySelector('#btn-2'); let btn3 = document.querySelector('#btn-iii'); permit btn4 = document.querySelector('#btn-4');   btn1.addEventListener('click', () =>{     document.body.mode.backgroundImage = "url('images/1.jpg')"; });  btn2.addEventListener('click', () =>{     document.body.fashion.backgroundImage = "url('images/2.jpg')"; });  btn3.addEventListener('click', () =>{     document.trunk.style.backgroundImage = "url('images/3.jpg')"; });  btn4.addEventListener('click', () =>{     document.body.style.backgroundImage = "url('https://i.imgur.com/mPKfD2J.jpg')"; });