Skip to content
Related Articles

Related Articles

How to change the background image using jQuery ?

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 03 Aug, 2021
View Discussion
Improve Article
Save Article

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 example illustrates the above approach:

Example:




   
<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
    jQuery Changing background-image CSS Property
    </title>
    <style>
        .box {
            width: 700px;
            height: 220px;
            border: 2px solid black;
            background-repeat: no-repeat;
            background-image: url(
        }
        h1{
            color:green;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(document).ready(function() {
            // Change background image of a div by clicking on the button
            $("button").click(function() {
                var imageUrl = 
                $(".box").css("background-image", "url(" + imageUrl + ")");
            });
        });
    </script>
</head>
  
<body>
    <center>
    <h1>GeeksforGeeks</h1>
    <h3>
    jQuery Changing background-image CSS Property
    </h3>
    <div class="box"></div>
    <p>
        <button type="button">
            Change Background Image
        </button>
    </p>
    </center>
</body>
  
</html>                    

Output:

  • Before Clicking on the button:
  • After Clicking on the button:
  • jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
    You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.


    My Personal Notes arrow_drop_up
    Recommended Articles
    Page :

    Start Your Coding Journey Now!