jQuery Get Set and Delete Div Background Image

jQuery set, get and delete background image; Through this tutorial, i am going to show you how to set, get and delete/remove div background image using jQuery.

Get, Set and Delete Div Background Image jQuery

To set, get and delete background image in a Div using jQuery:

jQuery Get Background Image
jQuery Set Background Image
jQuery Remove Background Image
Example – jQuery Set, Get and Remove Background Image of Div

jQuery Get Background Image

Get the background image in jQuery; as shown below:

$(".btn-get").click(function() {
    var bg = $('div').css('background-image'); // get background image using css property
    bg = bg.replace('url(','').replace(')','');
    alert(bg);
});

jQuery Set Background Image

Use the following code to set background image of div in jQuery using CSS property; as shown below:

$(".btn-set").click(function() {
 var img = 'http://laratutorials.com/wp-content/uploads/2019/04/jQuery-Form-Validation-Custom-Error-Message.jpg';
 var bg = $('div').css('background-image',"url(" + img + ")");
});

jQuery Remove Background Image

Use the following code remove/delete the background image of div using the jQuery CSS property; as shown below:

$(".btn-remove").click(function() {
    var bg = $('div').css('background-image','none');
});

Example – jQuery Set, Get and Remove Background Image of Div

See the following example for get the div background image, set the background image and delete/remove the background image using the jQuery css property; as shown below:

<html>
   <head>
      <title> How to get, set and remove background image attribute example</title>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
      <script>
        $(function() {
            $(".btn-get").click(function() {
                var bg = $('#bg-img').css('background-image');
                bg = bg.replace('url(','').replace(')','');
                alert(bg);
            });            
            $(".btn-remove").click(function() {
                var bg = $('#bg-img').css('background-image','none');
            });            
            $(".btn-set").click(function() {
                var img = 'http://laratutorials.com/wp-content/uploads/2019/04/jQuery-Form-Validation-Custom-Error-Message.jpg';
                var bg = $('#bg-img').css('background-image',"url(" + img + ")");
            });
        });
      </script>
      <style>
        .card{
            margin: 30px;
        }
     </style>
   </head>
   <body>
    <div class="card">
        <div id="bg-img" style="background-image: url('http://www.Laratutorials.com/wp-content/uploads/2019/08/How-to-Download-Install-XAMPP-on-Windows.jpeg');  width: 1000px; height: 500px;">
            
        </div>
    </div>
   <button type="type" class="btn-get">Get background image</button>
   <button type="type" class="btn-set">Set background image</button>
   <button type="type" class="btn-remove">Remove background image</button>
   </body>
</html>

Conclusion

To set, get and delete background image in a Div using jQuery; In this article, you have learned how to get, set and remove background image using the jQuery CSS property.