How to Change Background Image in javaScript?
This article will show you how to change the background color in JavaScript. Changing a background image in JavaScript involves modifying the style property of an HTML element to update its backgroundImage property. This can be done by selecting the element and setting its style.backgroundImage property to the new image URL.
Table of Content
- Directly Changing the style Property
- Using CSS Classes
Approach 1: Directly Changing the style Property
You can directly change the style property of an HTML element to update its background image. This approach does not require any additional functions.
<!DOCTYPE html>
<html>
<head>
<title>
How to Change Background
Image in JavaScript?
</title>
<style>
body {
text-align: center;
}
#GFG {
width: 550px;
height: 200px;
margin: auto;
background-image: url(
'https://www.w3wiki.net/wp-content/uploads/javascript.png');
background-size: contain;
}
</style>
</head>
<body>
<h1 id="GFG">
Welcome to w3wiki
</h1>
<br>
<button onclick="changeBackgroundImage()">
Change Background Image
</button>
<script>
function changeBackgroundImage() {
let headingID = document.getElementById("GFG");
headingID.style.backgroundImage =
"url('https://media.w3wiki.net/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png')";
}
</script>
</body>
</html>
Output:
Approach 2: Using CSS Classes
Alternatively, you can define different CSS classes with different background images and then apply these classes to the element using JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>
How to Change Background
Image in JavaScript?
</title>
<style>
body {
text-align: center;
}
#GFG {
width: 550px;
height: 200px;
margin: auto;
background-size: contain;
}
.image {
background-image: url(
'https://www.w3wiki.net/wp-content/uploads/javascript.png');
}
.new-background {
background-image: url(
'https://media.w3wiki.net/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png');
}
</style>
</head>
<body>
<h1 id="GFG" class="image">
Welcome to w3wiki
</h1>
<br>
<button onclick="changeBackgroundImage()">
Change Background Image
</button>
<script>
function changeBackgroundImage() {
let headingID = document.getElementById("GFG");
headingID.classList.remove("image");
headingID.classList.add("new-background");
}
</script>
</body>
</html>
Output:
In this example, clicking the “Change Background Image” button will remove the initial-background class and add the new-background class to the GFG element, changing its background image.
Contact Us