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.

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.

Output

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

On clicking the given button, the output will be -