How to change the background image using jQuery?

Changing a background-image using jQuery is an easy task. We can use the css() method and the url() function notation to change the background-image.

The syntax to change the background-image using jQuery is given as follows.

We can directly pass the image to the url() function as given above, or it can be done by storing the image in a variable and pass the variable name to the url as given below.

var img = "image";
$("selector").css({"background-image": "url(" + img + ")"});

Example

In this example, there is a div element with its background-image. We are using the css() method and url() function notation to change the background-image of the corresponding div element.

<!DOCTYPE html>
<html>
<head>
<style>
#d1 {
border: 3px solid red;
background-image: url("forest.jpg");
height: 300px;
width: 350px;
}

</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

<script>
$(document).ready(function() {
$("button").click(function() {
$("#d1").css({"background-image": "url(jtp.png)"});
});
});
</script>
</head>

<body>
<center>
<h4> This is an example of changing the background-image using jQuery. </h4>
<div id = "d1"> </div>
<p> Click the following button to change the background image of above div </p>
<button>
Click me
</button>
</center>
</body>

</html>

Test it Now

Output

After the execution of the above code, the output will be -