How To Get, Set and Delete Div Background Image jQuery?

13-Jun-2023

.

Admin

How To Get, Set and Delete Div Background Image jQuery?

In this tutorial, you will learn get. you will learn set and delete div background image jquery. We will look at example of how to get. this example will help you set and delete div background image jquery. you will do the following things for how to get.

To get, set and delete div background image using jQuery, you can use the following methods:

1. Get div background image:

To get the current background image of a div element, use the css() method with the "background-image" property as follows:

Example 1:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>How To Get, Set and Delete Div Background Image jQuery? - NiceSnippets.Com</title>

</head>

<body>

</body>

<script type="text/javascript">

var bgImage = $('div').css('background-image');

</script>

</html>

2. Set div background image:

To set a new background image for a div element, use the css() method with the "background-image" property and provide the URL of the new image as follows:

Example 2:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>How To Get, Set and Delete Div Background Image jQuery? - NiceSnippets.Com</title>

</head>

<body>

</body>

<script type="text/javascript">

$('div').css('background-image', 'url("new-image.jpg")');

</script>

</html>

3. Delete div background image:

To remove the existing background image of a div element, use the css() method with an empty string as the value of the "background-image" property as follows:

Example 3:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>How To Get, Set and Delete Div Background Image jQuery? - NiceSnippets.Com</title>

</head>

<body>

</body>

<script type="text/javascript">

$('div').css('background-image', '');

</script>

</html>

#JavaScript