How to Change Background Image in javaScript? Last Updated : 30 Apr, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 PropertyUsing CSS ClassesApproach 1: Directly Changing the style PropertyYou can directly change the style property of an HTML element to update its background image. This approach does not require any additional functions. HTML <!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.geeksforgeeks.org/wp-content/uploads/javascript.png'); background-size: contain; } </style> </head> <body> <h1 id="GFG"> Welcome to GeeksforGeeks </h1> <br> <button onclick="changeBackgroundImage()"> Change Background Image </button> <script> function changeBackgroundImage() { let headingID = document.getElementById("GFG"); headingID.style.backgroundImage = "url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png')"; } </script> </body> </html> Output: Approach 2: Using CSS ClassesAlternatively, you can define different CSS classes with different background images and then apply these classes to the element using JavaScript. HTML <!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.geeksforgeeks.org/wp-content/uploads/javascript.png'); } .new-background { background-image: url( 'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png'); } </style> </head> <body> <h1 id="GFG" class="image"> Welcome to GeeksforGeeks </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. Comment More infoAdvertise with us Next Article How to Change Background Images on Scroll using CSS? P ppatelkap Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Set Background Image in CSS? CSS (Cascading Style Sheets) can allow developers to set the background image for the web pages or specific HTML elements. This feature can help enhance the visual aesthetics of the website. The background-image property in CSS can be used to specific one or multiple background images to be applied 3 min read How to Crop an Image in JavaScript? To crop an image in JavaScript, you can use the <canvas> element to manipulate the image's dimensions and crop it to a specified area. This approach is flexible and works entirely in the browser without needing external libraries. Here's a step-by-step example demonstrating how to crop an imag 3 min read How to create an image map in JavaScript ? An image map is nothing but an image that is broken into various hotspots and each hotspot will take you to a different file. Hotspots are nothing but clickable areas which we create on an image by using the <area> tag. This type of map is called a client-side image map as the map is embedded 3 min read How to Change Background Images on Scroll using CSS? Background images are crucial in web development, significantly enhancing the user experience. Using background images on a webpage can effectively showcase a brand or convey specific messages. Here, we will explore how to change background images on scroll using CSS. ApproachThe HTML includes a spa 2 min read How to change the background image using jQuery ? To change the background image using jQuery, you can use the jQuery CSS() method. For this, the whole property value is specified using the url() functional notation. Approach: Suppose we have an image URL stored in a variable and then use css() method to change the value of background image. Below 2 min read How to Display Images in JavaScript ? To display images in JavaScript, we have different approaches. In this article, we are going to learn how to display images in JavaScript. Below are the approaches to display images in JavaScript: Table of Content Using CreateElementUsing InnerHTMLApproach 1: Using CreateElementIn an HTML document, 2 min read Like