How to Get, Set and Delete Div Background Image using jQuery?

This tutorial is created to Set, Get and Delete background image. In this tutorial, You'll learn to Get, Set and Remove the background image using jQuery.

  1. Get Background image

    You can use the below code for getting the background image in jQuery with fade out effect.

     $("#btn-get").click(function () {
                var bg = $('#bg-img').css('background-image');
                bg = bg.replace('url(', '').replace(')', '');
                alert(bg);
    });
  2. Set Background Image

    You can use the below code for setting the background image using the jQuery CSS property with fade in effect.

    $("#btn-set-fade").click(function () {
                var img = 'http://localhost/BH/assets/images/main/blog-image25.jpg';
                $('#bg-img').css('background-image', "url(" + img + ")").fadeIn('slow');
    });
  3. Remove Background Image

    You can use the below code for removing the background image using the jQuery CSS property.

    $("#btn-remove-fade").click(function () {
                $('#bg-img').fadeOut('fast', function () {
                    $('#bg-img').css('background-image', 'none');
                });
    });
  4. Here's an Example

    You'll find all the above get , set and remove background image in a div separate JS functions using the jQuery css property.

    index.html

    <html>
    <head>
        <title>How to Get, Set and Delete Div Background Image using jQuery | BH</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
            .container-fluid {
                margin: 30px;
            }
            .btn-group{
                margin-bottom:20px;
            }
    
            .border-heading{
                padding: 10px;
                border-radius: 5px;
                border: 2px solid saddlebrown;
            }
        </style>
    </head>
    
    <body>
        <div class="container-fluid">
            <div class="text-center">
                <div class="btn-group" role="group" aria-label="Basic example">
                    <button id="btn-get" type="button" class="btn btn-secondary">Get background image</button>
                    <button id="btn-remove-fade" type="button" class="btn btn-secondary">Remove background image</button>
                    <button id="btn-set-fade" type="button" class="btn btn-secondary">Set background image</button>
                </div>
            </div>
    
    
            <div id="bg-img"style="background-image: url('https://bishrulhaq.com/assets/images/main/blog-image26.jpg'); width: 1395px; height: 573px;">
                <p class="text-center border-heading"><b>Hello World! It's BH</b></p>
            </div>
        </div>
    
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"crossorigin="anonymous"></script>
        <script>
    
            $(function () {
                $("#btn-set-fade").click(function () {
                    var img = 'https://bishrulhaq.com/assets/images/main/blog-image25.jpg';
                    $('#bg-img').css('background-image', "url(" + img + ")").fadeIn('slow');
                });
    
                $("#btn-remove-fade").click(function () {
                    $('#bg-img').fadeOut('fast', function () {
                        $('#bg-img').css('background-image', 'none');
                    });
                });
    
                $("#btn-get").click(function () {
                    var bg = $('#bg-img').css('background-image');
                    bg = bg.replace('url(', '').replace(')', '');
                    alert(bg);
                });
    
            });
    
        </script>
    </body>
    </html>
                                            

Hope this tutorial helps you! Feel free to drop your opinion at the comment section.