All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

JavaScript Change Background Image

Last Updated : Mar 11, 2024

JavaScript Change Background Image

In this article we will show you the solution of JavaScript change background image, we will change the background image of any HTML page using the JavaScript function. The syntax of functions in JavaScript is,

function name(parameter1, parameter2,......) {
// block of code

And we will set the background image using the style attribute in JavaScript. The syntax is, = value ;

We will see on example using this below.

Step By Step Guide On JavaScript Change Background Image :-

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript change background image</title>
    <link rel="stylesheet" href="">
            background-color: aliceblue;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
            color : rgb(95, 194, 95) ;
            font-size: 20px;
        <h1> TALKERSCODE </h1>
        <h3> JavaScript change background image </h3>
    <select name="BgImage" id="BgImage" onchange="changeBackgroundImage(this)">
    <option value=""> Choose background image </option>
    <option value="dragonfly.jpg">dragonfly</option>
    <option value="rabbit.jpg">rabbit</option>
    <option value="peacock.jpg">peacock</option>
    <option value="sunset.jpg">sunset</option>
    <option value="snowflake.jpg">snowflake</option>
        function changeBackgroundImage(e) {
            let target = document.body;
   = "url("+e.value+")" ;
   = "no-repeat" ;
   = "cover";
  1. writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
  2. The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
  3. The metadata for the HTML file is contained in the <head> tag, which is closed with </head> tag.
  4. The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
  5. We'll use an external CSS file to style the HTML page.
  6. using <style> tag to add CSS
  7. create a <Center> tag the add a <h1> tag used to add a heading close it with </h1> tag and add a <h3> tag within it
  8. now create <select> tag with the onchange of a function with an argument.
  9. Creating some <option> tags and adding some background image to each tag's value.
  10. To write JavaScript, create a <script> tag
  11. Now calling the function and pass an argument e
  12. Let a variable target by accessing document.body.
  13. Using and equal it with url( e.value ).
  14. Also using background repeat and background size property.
  15. Lastly, by selecting desired image to the HTML page we can change the background image.

Conclusion :-

At last, here in conclusion, we can say that with this article’s help, we know How to change background image using JavaScript.

I hope this article on JavaScript change background image helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪